i try to build following css grid template but struggling with the last 3 items.
has anyone an idea to resolve this?
i think the problem is maybe the height of the second row (items 4,5,6)
.grid {
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(12, 1fr);
.col {
&:nth-child(10n+1),
&:nth-child(10n+2),
&:nth-child(10n+10) {
grid-column: auto / span 3;
height: 580px;
background-color: red;
}
&:nth-child(10n+3),
&:nth-child(10n+7) {
grid-column: auto / span 6;
height: 580px;
background-color: yellow;
}
&:nth-child(10n+4),
&:nth-child(10n+5),
&:nth-child(10n+6) {
grid-column: auto / span 4;
height: 430px;
background-color: green;
}
&:nth-child(10n+8),
&:nth-child(10n+9) {
grid-column: auto / span 3;
height: 275px;
background-color: blue;
}
}
}
Template:
Result:
you are almost good, you simply need to adjust the start of the last blue div so it's below the first one. You can also change the way you are setting the height like below:
.grid {
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(12, 1fr);
grid-auto-flow:dense; /* this will fix the position of the last red */
}
.grid .col:nth-child(10n+1),
.grid .col:nth-child(10n+2),
.grid .col:nth-child(10n+10) {
grid-column: span 3;
grid-row: span 2; /* take two rows */
background-color: red;
height:200px; /* define the height for only the red and the blue, yellow will follow */
}
.grid .col:nth-child(10n+3),
.grid .col:nth-child(10n+7) {
grid-column:span 6;
grid-row: span 2; /* also take two rows */
background-color: yellow;
}
.grid .col:nth-child(10n+4),
.grid .col:nth-child(10n+5),
.grid .col:nth-child(10n+6) {
grid-column:span 4;
background-color: green;
height:150px; /* the green are alone so they need a height */
}
.grid .col:nth-child(10n+8),
.grid .col:nth-child(10n+9) {
grid-column-end: span 3;
background-color: blue;
}
/* this will fix your issue */
.grid .col:nth-child(10n+9) {
grid-column-start:7
}
/* */
<div class="grid">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Related
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 12 months ago.
There are three children dive in a parent container (div):
.grid-container {
display: grid;
.grid-container > div {
height:auto;
width: auto;
}
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
</div>
Please find the following code. This will help you in making the required structure.
:root {
--wrapper: 100vw;
--gutter: 10px;
--noOfColumns: 4;
--noOfGutters: calc(var(--noOfColumns) - 1);
--ratioA: 16;
--ratioB: 9;
--factor: calc(var(--ratioB) / var(--ratioA));
--rh: calc(( (var(--wrapper) - (var(--noOfGutters) * var(--gutter)))
/ var(--noOfColumns)) * var(--factor));
}
.grid {
max-width: var(--wrapper);
display: grid;
grid-template-columns: repeat(var(--noOfColumns), 1fr);
grid-auto-flow: dense;
grid-auto-rows: minmax(var(--rh), auto);
}
.grid__item {
background-color: steelBlue;
padding: 20px;
}
.grid__item--lg {
grid-column: span 2;
grid-row: span 2;
background-color: coral;
}
.grid__item--right {
grid-column: 3/span 2;
}
.grid__item--db {
grid-column: span 2;
background-color: lightBlue;
}
.steelBlue {
background-color: steelBlue;
}
<div class="grid">
<div class="grid__item grid__item--lg grid__item--right">1</div>
<div class="grid__item grid__item--db">2</div>
<div class="grid__item grid__item--db steelBlue">3</div>
</div>
Is there a way in css grid of saying 'after the second column, start another row'?
It seems straightforward enough defining how much height and width you want a grid cell to take up, but defining where you want cells to appear requires a lot of syntax - I feel like I'm missing something.
Like this layout:
main {
display: grid;
grid-gap: 10px;
max-width: 700px;
margin: 0 auto;
}
.block {
height: 200px;
}
.block--one {
background: coral;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.block--two {
background: cornflowerblue;
grid-column-start: 2;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
}
.block--three {
background: burlywood;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.block--four {
background: lightseagreen;
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 4;
}
<main>
<div class="block block--one"></div>
<div class="block block--two"></div>
<div class="block block--three"></div>
<div class="block block--four"></div>
</main>
Shouldn't it be achievable with something like this?
main {
display: grid;
grid-gap: 10px;
max-width: 700px;
margin: 0 auto;
grid-template-rows: 2fr 2fr;
grid-template-columns: 2fr 4fr 5fr 1fr;
}
.block {
height: 200px;
}
.block--one {
background: coral;
}
.block--two {
background: cornflowerblue;
}
.block--three {
background: burlywood;
}
.block--four {
background: lightseagreen;
}
<main>
<div class="block block--one"></div>
<div class="block block--two"></div>
<div class="block block--three"></div>
<div class="block block--four"></div>
</main>
You can simplify the code by using a shorthand property.
In your first example, you're using all long-hand properties. For example, you have this:
.block--two {
background: cornflowerblue;
grid-column-start: 2;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
}
Like with other CSS features, such as borders, margins and padding, there's a shorthand property to consolidate multiple lines of code.
In this case, there's the grid-area property, which shortens the code above to:
grid-area { 1 / 2 / 2 / 6 }
The values flow in this order:
grid-row-start
grid-column-start
grid-row-end
grid-column-end
main {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 200px;
grid-gap: 10px;
max-width: 700px;
margin: 0 auto;
}
.block--one {
background: coral;
/* no need to specify placement here; default aligns to row 1, column 1 */
}
.block--two {
background: cornflowerblue;
grid-area: 1 / 2 / 2 / -1;
}
.block--three {
background: burlywood;
grid-area: 2 / 1 / 3 / 4;
}
.block--four {
background: lightseagreen;
grid-area: 2 / 4 / 3 / -1;
}
<main>
<div class="block block--one"></div>
<div class="block block--two"></div>
<div class="block block--three"></div>
<div class="block block--four"></div>
</main>
More details: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
A good way of defining the rows and columns can be by using grid-template-areas and grid-area which can define how many rows and columns a grid area should take up. This is especially helpful when changing the layout with #media tags, you only have to change the one attribute.
From your row and column definitions I can add each block to take up the space that I want it to.
See example for 2 rows by 4 columns for the 4 blocks.
main {
display: grid;
grid-gap: 10px;
max-width: 700px;
margin: 0 auto;
grid-template-rows: 2fr 2fr;
grid-template-columns: 2fr 4fr 5fr 1fr;
grid-template-areas:
"block1 block2 block2 block2"
"block3 block3 block4 block4";
}
.block {
height: 200px;
}
.block--one {
grid-area: block1;
background: coral;
}
.block--two {
grid-area: block2;
background: cornflowerblue;
}
.block--three {
grid-area: block3;
background: burlywood;
}
.block--four {
grid-area: block4;
background: lightseagreen;
}
<main>
<div class="block block--one"></div>
<div class="block block--two"></div>
<div class="block block--three"></div>
<div class="block block--four"></div>
</main>
main {
display: grid;
grid-gap: 10px;
max-width: 700px;
margin: 0 auto;
grid-auto-flow: row;
}
.block {
height: 200px;
}
.block--one {
background: coral;
grid-column: 1;
}
.block--two {
background: cornflowerblue;
grid-column: 2/ 6;
}
.block--three {
background: burlywood;
grid-column: 1 / 4;
}
.block--four {
background: lightseagreen;
grid-column: 4 / 6;
}
<main>
<div class="block block--one"></div>
<div class="block block--two"></div>
<div class="block block--three"></div>
<div class="block block--four"></div>
</main>
grid-auto-flow: row; Will start on new row if the element is not able to fit on the current row
As you can see, when I change the grid-gap, only the width of 1, 3 and 4 are updated.
The width of 2 is not updated at all.
I want it to update the width of 1 and the width of 2, 3 and 4.
The demo of MDN shows that it's possible to resize all items accordingly.
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
Here's my code
.container {
display: grid;
width: 500px;
height: 100px;
gap: 20px; /* Try to change this, width of 2 isn't updated */
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
transition: gap 0.3s linear;
}
.child {
background-color: gray;
text-align: center;
font-size: 50px;
color: white;
line-height: 70px
}
.child-1 {
grid-row-start: 1;
grid-row-end: 3;
}
.child-2 {
grid-column-start: 2;
grid-column-end: 4;
}
<div class="container">
<div class="child child-1">1</div>
<div class="child child-2">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
It's because the width of (2) include a gap so its width is 2fr + gap. changing the gap will also change the fr and the width will remain constant.
in this case 1fr = (500px - 2*gap)/4 so 2fr + gap = (500px - 2*gap)/2 + gap = 250px
Change the code and use a different structure where the width of (2) isn't constant:
.container {
display: grid;
width: 500px;
height: 100px;
grid-gap: 20px;
grid-template-columns: 4fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
animation: change 1s linear infinite alternate;
}
.child {
background-color: gray;
text-align: center;
font-size: 50px;
color: white;
line-height: 70px;
grid-column:span 2;
}
.child-1 {
grid-row-start: 1;
grid-row-end: 3;
grid-column:span 1;
}
.child-2 {
grid-column-start: 2;
grid-column-end: 6;
}
#keyframes change {
to {
grid-gap:1px;
}
}
<div class="container">
<div class="child child-1">1</div>
<div class="child child-2">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
In this case 1fr = (500px - 4*gap )/8 and the width of (2) is 4fr + 3*gap = (500px - 4*gap)/2 + 3*gap = 250px + gap But now the (3) and (4) will be constant because 2fr + gap=(500px - 4*gap)/4 + gap = 125px
Another structure where all will update:
.container {
display: grid;
width: 500px;
height: 100px;
grid-gap: 30px;
grid-template-columns: 6fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
animation: change 1s linear infinite alternate;
}
.child {
background-color: gray;
text-align: center;
font-size: 50px;
color: white;
line-height: 70px;
grid-column:span 3;
}
.child-1 {
grid-row-start: 1;
grid-row-end: 3;
grid-column:span 1;
}
.child-2 {
grid-column-start: 2;
grid-column-end: 8;
}
#keyframes change {
to {
grid-gap:1px;
}
}
<div class="container">
<div class="child child-1">1</div>
<div class="child child-2">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
The (2) will have a width equal to 250px + 2*gap. (3) and (4) will have a width equal to 125px + 0.5*gap
Another configuration:
.container {
display: grid;
width: 500px;
height: 100px;
grid-gap: 30px;
grid-template-columns: 2fr 4fr 2fr 1fr 1fr 2fr;
grid-template-rows: 1fr 1fr;
animation: change 1s linear infinite alternate;
}
.child {
background-color: gray;
text-align: center;
font-size: 50px;
color: white;
line-height: 70px;
grid-column:span 2;
}
.child-1 {
grid-row-start: 1;
grid-row-end: 3;
}
.child-2 {
grid-column-start: 3;
grid-column-end: 7;
}
#keyframes change {
to {
grid-gap:1px;
}
}
<div class="container">
<div class="child child-1">1</div>
<div class="child child-2">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
Basically the trick is to avoid having a constant width for your elements.
Problem:
It's not easy to see it from outside but if you can Examine the Grid Layout in Firefox developer tools you can see the difference.
You can notice that the width of the two columns of 2 is changing yet the parent remains constant because it is spanning them both and breaking it would make the grid asymmetrical.
Solution:
You can use this Grid Generator and create some changes to the code for the following setup:
Now 1 spans two fractions of the layout, 2 spans four fractions while 3 and 4 spans two fractions each. In this way, the whole structure is symmetrical.
.container {
display: grid;
width: 500px;
height: 100px;
grid-gap: 20px; /* Try to change this, width of 2 isn't updated */
grid-template-columns: 4fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
transition: grid-gap 1s ease-in-out;
}
.container:hover {
grid-gap: 0px;
}
.child {
background-color: gray;
text-align: center;
font-size: 50px;
color: white;
line-height: 70px;
}
.child-1 {
grid-area: 1 / 1 / 3 / 2;
}
.child-2 {
grid-area: 1 / 2 / 2 / 6;
}
.child-3 {
grid-area: 2 / 2 / 3 / 4;
}
.child-4 {
grid-area: 2 / 4 / 3 / 6;
}
<div class="container">
<div class="child child-1">1</div>
<div class="child child-2">2</div>
<div class="child child-3">3</div>
<div class="child child-4">4</div>
</div>
I am creating a repeating grid system, in which I need to repeat the same structure as the first 7 items. Divs A to G is generating the result I want and all other div are coming on right position column wise but only H and M (The first and sixth item in new row and) not taking the desired height.
H need to equal to height of I and J combine and M need to be equal to K and L's combine height, same as A and F:
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, [col] 1fr);
grid-template-rows: repeat(10, [row] auto);
grid-gap: 1em;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
display: flex;
align-items: center;
}
.box:nth-of-type(7n+1) {
grid-column: col / span 2;
}
.box:nth-of-type(7n+3) {
grid-column: col 3 / span 1;
}
.box:nth-of-type(7n+4),
.box:nth-of-type(7n+5) {
grid-column: col 1 / span 1;
}
.box:nth-child(7n+6) {
grid-column: col 2 / span 2;
}
.box:nth-child(7n+7) {
grid-column: col 1 / span 3;
}
.box:first-child {
grid-row: row / span 2;
}
.box:nth-child(2) {
grid-row: row;
}
.box:nth-child(3) {
grid-row: row 2;
}
.box:nth-child(4) {
grid-row: row 3;
}
.box:nth-child(5) {
grid-row: row 4;
}
.box:nth-child(6) {
grid-row: row 3 / span 2;
}
<div class="wrapper">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
<div class="box">F</div>
<div class="box">G</div>
<!-- items with same spans need to be repeted -->
<div class="box">H</div>
<div class="box">I</div>
<div class="box">J</div>
<div class="box">K</div>
<div class="box">L</div>
<div class="box">M</div>
<div class="box">N</div>
</div>
First of all I simplified your code:
using only the nth-child logic for the row-column sizing,
removed grid-template-rows and the naming of the grid lines,
The issue we have now is that the boxes E and F are out of place from the rows:
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* grid-template-rows: repeat(10, [row] auto); */
grid-gap: 1em;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
display: flex;
align-items: center;
}
.box:nth-of-type(7n+1) {
grid-column: span 2;
grid-row: span 2;
}
.box:nth-child(7n+6) {
grid-column: span 2;
grid-row: span 2;
}
.box:nth-child(7n+7) {
grid-column: span 3;
}
<div class="wrapper">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
<div class="box">F</div>
<div class="box">G</div>
<!-- items with same spans need to be repeted -->
<div class="box">H</div>
<div class="box">I</div>
<div class="box">J</div>
<div class="box">K</div>
<div class="box">L</div>
<div class="box">M</div>
<div class="box">N</div>
</div>
Now you can shift the F to the last two columns using grid-column: 2 / 4 and then use grid-auto-flow: dense to pull it up - see demo below:
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
/*grid-template-rows: repeat(10, [row] auto);*/
grid-auto-flow: dense; /* fills in the spaces */
grid-gap: 1em;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
display: flex;
align-items: center;
}
.box:nth-of-type(7n+1) {
grid-column: span 2;
grid-row: span 2;
}
.box:nth-of-type(7n+5) {
grid-column: 1;
}
.box:nth-child(7n+6) {
grid-column: 2 / 4; /* changed */
grid-row: span 2;
}
.box:nth-child(7n+7) {
grid-column: span 3;
}
<div class="wrapper">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
<div class="box">F</div>
<div class="box">G</div>
<!-- items with same spans need to be repeted -->
<div class="box">H</div>
<div class="box">I</div>
<div class="box">J</div>
<div class="box">K</div>
<div class="box">L</div>
<div class="box">M</div>
<div class="box">N</div>
</div>
I have an article and an aside (sidebar) element - easy, except the title and sub-heading of the article need to span the entire row. If I take the title/sub-heading out of the article, the article element is no longer semantically complete.
Is there a way, using CSS Grid, to have the format below, where Title, Sub and Content are all a part of an "Article" element, and "Aside" is the second in a 2 column grid?
From my research so far, it seems this is not possible.
You can hack your way through using nested CSS grid if you know:
The width of the aside section
The height of the title and sub heading sections
(in many layouts, these dimensions are fixed)
You can use a pseudo element that create a space for the aside element and then sneak it inside the outer grid container - check out the demo below:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
article,
aside {
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
}
div {
display: grid;
grid-template-areas: "section aside";
}
section {
grid-area: section;
display: grid;
grid-template-areas: "header header" "subhead subhead" "content empty";
grid-template-rows: 50px 50px auto;
grid-template-columns: 80vw auto;
height: 100vh;
width: 100vw;
}
section article:first-child {
grid-area: header;
}
section article:nth-child(2) {
grid-area: subhead;
}
section article:last-child {
grid-area: content;
}
section:after {
content: '';
display: block;
grid-area: empty;
}
aside {
grid-area: aside;
height: calc(100vh - 100px);
width: 20vw;
align-self: flex-end;
position:relative;
transform: translateX(-100%);
}
<div>
<section>
<article>Article title</article>
<article>Article sub-heading</article>
<article>Article content</article>
</section>
<aside>Aside</aside>
</div>
You can use something like this.
* {box-sizing: border-box;}
.wrapper {
max-width: 940px;
margin: 0 auto;
}
.wrapper > div {
border: 2px solid rgb(233,171,88);
border-radius: 5px;
background-color: rgba(233,171,88,.5);
padding: 10px;
color: #d9480f;
}.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 4;
grid-row: 1;
}
.two {
grid-column: 1 / 4;
grid-row: 2;
}
.three {
grid-column: 1 / 3;
grid-row: 3;
min-height:200px;
}
.four {
grid-column: 3;
grid-row: 3;
min-height:200px;
}
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
Also check Fiddle.
And for more details please visit https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
You can achieve that by simply floating all the cells, as long as the article doesn't float - https://jsfiddle.net/yxbckzcq/1/
<div class="wrapper">
<article>
<div style="float:left;width:100%" class="one">One</div>
<div style="float:left;width:100%" class="two">Two</div>
<div style="float:left;width:70%" class="three">Three</div>
</article>
<div style="float:left;width:30%" class="four">Four</div>
</div>