I've created a CSS Grid with three rows and two elements on the grid. Both elements will have auto (varying) height. I'd like them to overlap 12% of their total height, but it isn't working. Check it out in the inspector...the image stays in the first row even though I explicitly tell it to go into the second row in my CSS.
Here's my code:
.fancy-slider__slide-grid {
position: relative;
display: -ms-grid;
display: grid;
overflow: visible;
width: 100%;
padding-bottom: 10px;
padding-left: 10px;
grid-auto-columns: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
-ms-grid-columns: minmax(0px, 10%) auto minmax(0px, 18%);
grid-template-columns: minmax(0px, 10%) auto minmax(0px, 18%);
-ms-grid-rows: auto minmax(0px, 12%) auto;
grid-template-rows: auto minmax(0px, 12%) auto;
}
#w-node-a3fb2c4d-077e-feb0-9b26-3d675a06e06a-401c64e4 {
-ms-grid-column: 2;
grid-column-start: 2;
-ms-grid-column-span: 2;
grid-column-end: 4;
-ms-grid-row: 1;
grid-row-start: 1;
-ms-grid-row-span: 2;
grid-row-end: 3;
}
#w-node-_2fd297ea-f918-8546-85bc-4586e222abd8-401c64e4 {
-ms-grid-column: 1;
grid-column-start: 1;
-ms-grid-column-span: 2;
grid-column-end: 3;
-ms-grid-row: 2;
grid-row-start: 2;
-ms-grid-row-span: 2;
grid-row-end: 4;
-ms-grid-row-align: stretch;
align-self: stretch;
}
.card.is--no-move.z-2.is--p-tight {
padding: 30px 35px;
}
.card.is--no-move.z-2 {
position: relative;
z-index: 2;
}
.card {
overflow: hidden;
padding: 45px 10% 40px;
border-radius: 25px;
background-color: #efefef;
box-shadow: 2px 2px 9px 0 rgb(0 0 0 / 20%);
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
}
.img-rounded {
border-radius: 25px;
}
._w-100 {
width: 100%;
}
img {
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
<div class="fancy-slider__slide-grid">
<img src="https://assets.website-files.com/62f407793ac3ad18dd179fd6/6303c9f10f427f8359d47566_ta-guy-1%403x.png" loading="lazy" id="w-node-a3fb2c4d-077e-feb0-9b26-3d675a06e06a-401c64e4" srcset="https://assets.website-files.com/62f407793ac3ad18dd179fd6/6303c9f10f427f8359d47566_ta-guy-1%403x-p-500.png 500w, https://assets.website-files.com/62f407793ac3ad18dd179fd6/6303c9f10f427f8359d47566_ta-guy-1%403x-p-800.png 800w, https://assets.website-files.com/62f407793ac3ad18dd179fd6/6303c9f10f427f8359d47566_ta-guy-1%403x.png 1249w" sizes="(max-width: 479px) 21.421875px, 4vw" alt="" class="img-rounded _w-100">
<div id="w-node-_2fd297ea-f918-8546-85bc-4586e222abd8-401c64e4" class="card is--no-move z-2 is--p-tight">
<p class="mb-3">“Effective psychotherapy can only occur when a client has trust in their therapist on many levels. They must trust the therapist's judgment, their wisdom, their expertise, their compassion, their constancy, and above all their willingness to maintain privacy.”</p>
<div class="fancy-slider__card-footer">
<h5 class="mb-custom-1 small-text">Dr. Bill Whitehead</h5>
<div class="small-text">Founder</div>
</div>
</div>
</div>
Is there any way to achieve what I'm trying to do using CSS Grid? Two elements with unknown height with a 12% overlap of their total combined height? I know I could do this a bunch of other ways (like negative margin, etc.) but I'm really just curious as to why this isn't working so I can understand CSS Grid better.
Related
I've made a sort of diagram with temperature values and a schedule for it. Now I want to align the time-tags perfectly with the middle of my gaps between the "blocks". The first one works with position:absolute and left:(%-px/2), but the second and third example are off. How does one align these boxes?
The Fiddle is HERE.
body {
background-color: #DDD;
}
a {
cursor: pointer;
}
.block {
display: block;
height: 100%;
color: #FFF;
font-size: .75em;
float: left;
position: relative;
opacity: 1;
transition: opacity, 0.4s ease; /* hover effect transition */
border-radius: 5px;
}
.block:nth-child(n+2) {
margin-left: 0.5%;
}
.block:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.block.cool,
.legend li:nth-of-type(1):before {
background-color: #41A6F0;
}
.block.hot,
.legend li:nth-of-type(2):before {
background-color: #E27A3F;
}
.paused.cool {
background-color: #ccc;
}
.paused.hot {
background-color: #bbb;
}
.barchart {
display: grid;
margin: 0;
grid-template-columns:
[viewport-start] minmax(0.57em, 1fr) [container-start] minmax(20em, 35em) [container-end] minmax(0.75em, 1fr) [viewport-end];
grid-auto-rows: 30px;
}
row {
padding: 5px;
grid-column: container;
grid-row: span 4;
line-height: 120px;
text-align: center;
width: 0%;
animation: expand 1.2s ease forwards;
/* see animation "expand" below */
}
timerow {
grid-column: container;
grid-row: span 1;
line-height: 14px;
text-align: center;
visibility: hidden;
animation: 1.3s blendin; /* see animation "blendin" below */
animation-fill-mode: forwards;
margin-top: -15px;
position: relative;
}
timerow a {
position: absolute;
height: 25px;
width: 44px;
font-size: 0.8em;
color: #919191;
background: #fff;
}
/*
timerow a:last-child {
float: right;
margin-right: -12px;
}
timerow a:first-child {
margin-left: -17px;
}
*/
tag {
grid-column: container;
padding-top: 8px;
font-size: 0.8em;
color: #919191;
}
/* Big-Screen Design */
#media screen and (min-width: 768px) {
.barchart {
margin-left: -4.5em;
grid-template-columns:
[viewport-start] minmax(0.5em, 1fr) [axis-start] minmax(2em, 8em) [container-start] minmax(36em, 3fr) [container-end] minmax(0.5em, 1fr) [viewport-end];
}
tag {
grid-column: axis-start/container-start;
grid-row: span 4;
line-height: 120px;
padding: 0;
text-align: center;
}
}
/* intro animation */
#keyframes expand {
from {
width: 0%;
}
to {
width: calc(100% - 12px);
}
}
#keyframes blendin {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
#media screen and (min-width: 768px) {
#keyframes expand {
from {
width: 0%;
}
to {
width: calc(100% - 13px);
}
}
}
row:nth-child(4) {
animation-delay: .1s;
}
row:nth-child(6) {
animation-delay: .2s;
}
<div class="barchart">
<tag>Workday</tag>
<row>
<a style="width:28.9444444444%;" class="block cool">19deg</a>
<a style="width:63.805555555%;" class="block hot">21deg</a>
<a style="width:6.25%;" class="block hot">22deg</a>
</row>
<timerow>
<a style="left:calc(29.1944% - 22px);">07:30</a>
<a style="left:calc(93.5% - 22px);">22:30</a>
</timerow>
<tag>Weekend</tag>
<row>
<a style="width:44%;" class="block cool">16deg</a>
<a style="width:16%;" class="block paused hot">21deg</a>
<a style="width:38.5%;" class="block paused cool">18deg</a>
</row>
<timerow>
<a style="left:calc(44% - 22px);">00:00</a>
<a style="left:calc(60.75% - 22px);">00:00</a>
</timerow>
</div>
timerow a {
position: absolute;
height: 25px;
width: 44px;
font-size: 0.8em;
color: #919191;
background: #fff;
}
this one get's positioned too far right,
<a style="left:calc(93.5% - 22px);">22:30</a>
while this one works perfectly, where the ":" is centered in the gap:
<a style="left:calc(29.1944% - 22px);">07:30</a>
Even though I added the % numbers and factored in the 0.5% gap and subtracted the 22px for half the width of the box.
You also have the padding that you need to account for since position:absolute consider the padding-box to do the calculation. Add margin to timerow equal to the padding applied to row and you calculation will be correct.
You can also simplify the -22px with a translation. Also consider box-sizing:border-box; to your row element instead of decreasing the width in the animation.
body {
background-color: #DDD;
}
a {
cursor: pointer;
}
.block {
display: block;
height: 100%;
color: #FFF;
font-size: .75em;
float: left;
position: relative;
opacity: 1;
transition: opacity, 0.4s ease; /* hover effect transition */
border-radius: 5px;
}
.block:nth-child(n+2) {
margin-left: 0.5%;
}
.block:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.block.cool,
.legend li:nth-of-type(1):before {
background-color: #41A6F0;
}
.block.hot,
.legend li:nth-of-type(2):before {
background-color: #E27A3F;
}
.paused.cool {
background-color: #ccc;
}
.paused.hot {
background-color: #bbb;
}
.barchart {
display: grid;
margin: 0;
grid-template-columns:
[viewport-start] minmax(0.57em, 1fr) [container-start] minmax(20em, 35em) [container-end] minmax(0.75em, 1fr) [viewport-end];
grid-auto-rows: 30px;
}
row {
padding: 5px;
box-sizing:border-box;
grid-column: container;
grid-row: span 4;
line-height: 120px;
text-align: center;
width: 0%;
animation: expand 1.2s ease forwards;
/* see animation "expand" below */
}
timerow {
grid-column: container;
grid-row: span 1;
line-height: 14px;
margin:0 5px;
text-align: center;
visibility: hidden;
animation: 1.3s blendin; /* see animation "blendin" below */
animation-fill-mode: forwards;
margin-top: -15px;
position: relative;
}
timerow a {
position: absolute;
height: 25px;
width: 44px;
font-size: 0.8em;
color: #919191;
background: #fff;
transform:translateX(-50%);
}
tag {
grid-column: container;
padding-top: 8px;
font-size: 0.8em;
color: #919191;
}
/* Big-Screen Design */
#media screen and (min-width: 768px) {
.barchart {
margin-left: -4.5em;
grid-template-columns:
[viewport-start] minmax(0.5em, 1fr) [axis-start] minmax(2em, 8em) [container-start] minmax(36em, 3fr) [container-end] minmax(0.5em, 1fr) [viewport-end];
}
tag {
grid-column: axis-start/container-start;
grid-row: span 4;
line-height: 120px;
padding: 0;
text-align: center;
}
}
/* intro animation */
#keyframes expand {
from {
width: 0%;
}
to {
width: 100%;
}
}
#keyframes blendin {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
row:nth-child(4) {
animation-delay: .1s;
}
row:nth-child(6) {
animation-delay: .2s;
}
<div class="barchart">
<tag>Workday</tag>
<row>
<a style="width:28.9444444444%;" class="block cool">19deg</a>
<a style="width:63.805555555%;" class="block hot">21deg</a>
<a style="width:6.25%;" class="block hot">22deg</a>
</row>
<timerow>
<a style="left:calc((28.9444444444 + 0.5/2)*1%);">07:30</a>
<a style="left:calc((28.9444444444 + 63.805555555 + 0.5 + 0.5/2)*1%);">22:30</a>
</timerow>
<tag>Weekend</tag>
<row>
<a style="width:44%;" class="block cool">16deg</a>
<a style="width:16%;" class="block paused hot">21deg</a>
<a style="width:38.5%;" class="block paused cool">18deg</a>
</row>
<timerow>
<a style="left:calc(44% + 0.5%/2);">00:00</a>
<a style="left:calc(44% + 16% + 0.5% + 0.5%/2);">00:00</a>
</timerow>
</div>
I tried to rebuild this Square Grid: how-to-create-a-flexible-square-grid-with-css-grid-layout
It works until I put images into the grid elements: Photo wall
.square-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-auto-rows: 1fr;
grid-auto-flow: dense;
}
.square-container::before {
content: '';
width: 100%;
height: 0;
padding-bottom: 100%;
grid-row: 1 / 2;
grid-column: 1 / 1;
}
.square-container > *:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
/* Just to make the grid visible */
.square-container > * {
background: rgba(0,0,0,0.1);
border: 1px solid grey;
opacity: 0.75;
}
.square-container > *:focus,
.square-container > *:hover {
border: 1px solid blue;
opacity: 1;
}
.square-container img
{ object-fit: contain; width:100%; height:auto; padding:0; margin:0; }
How can I fit the img-elements into the whole size of the grid-element?
.square-container img {
object-fit: cover;
width:100%;
height:100%;
}
creates a rectangle. A fixed grid-auto-rows: 15rem creates a near-square but then I can abstain from the pseudo element.
**[![model image][1]][1]
[1]: https://i.stack.imgur.com/0PfBI.jpg
Here, is my code, I don´t know how to make them look like in the image, I tried with the templates. but it´s in vain, I don't know how to do it. I tried changing the sizes, nothing, I'm stuck
thank you for your help, btw
.heromain-imgs {
display: grid;
grid-gap: 0;
grid-template-columns: 30% % 10% 12% 12% 12% 12% 12%;
grid-template-rows: repeat(3, 1fr)
}
.picture {
width: 100%;
height: 100%;
position: relative;
}
.picasia {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 4;
}
/* Picture of Asia */
.picture img {
width: 100%;
max-height: 100%;
}
.picture p {
position: absolute;
color: red;
z-index: 10;
left: 50%;
top: 50%;
}
/* */
.picsuda {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.picafrica {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 2;
grid-row-end: 3;
}**
enter image description here
i to search my website on IE Browser to see…
<style>
body {
margin: 5px;
display: -ms-grid;
display: grid;
width: 100%;
-ms-grid-columns: 9% 73% 17%;
-ms-grid-rows: 90px 105px 103px 140px 110px 70px;
background-color: #ebf5d7;
}
body > header {
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
background-image: url("/Bilder/f409784856.png");
background-repeat: no-repeat;
padding: 20px;
}
body > nav {
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 2;
margin-top: 30px;
background-color: #d2f5c4;
}
body > #externalLinks {
-ms-grid-column: 1;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin-top: 5px;
margin-bottom: 5px;
background-color: #d2f3c6;
}
body > main {
-ms-grid-column: 2;
-ms-grid-column-span: 2;
-ms-grid-row: 4;
background-color: #eaf6e5;
}
body > #furtherInformation {
-ms-grid-column: 3;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
background-color: #d2f3c6;
margin-top: 5px;
margin-bottom: 5px;
}
body > footer {
-ms-grid-column: 1;
-ms-grid-column-span: 6;
-ms-grid-row: 6;
background-color: #99ee7a;
}
how the screenshot to show , all is OK , but when write on my main Tag anything, it to show on the Top corner , not to my main Tag … i don't know because it not to show .
Can Please anyone help me , Thanks !
I "solve" the problem...people help me , to found the answer...
with display: block; on body > main{
body > main {
margin: 5px;
grid-area: main;
display: block;
}
I'm making a site responsive and i have an hover effect on a div but i need it to remove it on mobile devices using media queries breakpoints.
.div{
margin-bottom: 10px;
grid-column: 2/4;
grid-row: 4/5;
width: 100%;
height: 61vh;
display: grid;
margin-left: -100px;
margin-right: 100px;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
transition: margin-left .25s;
}
.div:hover{
margin-bottom: 10px;
grid-column: 2/4;
grid-row: 4/5;
width: 100%;
height: 61vh;
display: grid;
margin-left: -120px;
margin-right: 100px;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
transition: margin-left .25s;
}
#media screen and (max-width: 800px){
/*----------Here i would like to remove the hover effect--------------*/
}
Start by making the div hover effect only work on screens larger than x pixel, like this
#media screen and (min-width: 768px) {
div:hover {
//your code
}
}
The hover effect will only work on screens larger than 768px.