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>
Related
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>
This question already has an answer here:
CSS Grid: fractions within fractions
(1 answer)
Closed 3 years ago.
How can I divide a CSS Grid row with 3 columns into 2 equal sizes? Here is my fiddle:
https://jsfiddle.net/251f04ts/3/
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: 50px;
}
.one {
background-color: yellow;
}
.two {
background-color: blue;
}
.three {
background-color: purple;
}
.four {
background-color: green;
grid-column: 1/4;
}
.five {
background-color: pink;
grid-column: 1/3;
}
.six {
background-color: gray;
grid-column: 2/5;
}
<div class="wrapper">
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
<div class="four">
four
</div>
<div class="five">
five - this and six should be equal
</div>
<div class="six">
six
</div>
</div>
Put .wrapper_the_second into the row, where you want .five and .six.
.wrapper_the_second{
grid-column: 1/4;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
grid-auto-rows: 50px;
}
and then
.five {
background-color: pink;
}
.six {
background-color: gray;
}
This should do the work.
Jfiddle: https://jsfiddle.net/9e1naudg/
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>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want a simple grid with first 3 columns and second 2 equal length columns with css grid layout.
Can anyone help me? I am having issues using grid span.
Surprisingly, there seems to be no way to do this using CSS Grid. I can see it working with subgrids, but they're not yet available (as of February 2019). The good news is that this is a pretty straightforward task using Flexbox.
.container,
.item {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
.item {
background-color: red;
height: 50px;
border: 1px solid black;
}
/* Begin at 3rd child; end at 1st child */
.item:nth-child(-n +3) {
flex-basis: calc(100% / 3);
}
/* Begin at 4th item, apply to last child */
.item:nth-child(n+4) {
flex-basis: calc(100% / 2);
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
https://jsfiddle.net/z9j1v3uc/1/
* {box-sizing: border-box;}
.wrapper {
max-width: 940px;
margin: 0 auto;
}
.wrapper > div {
border: 2px solid black;
border-radius: 5px;
background-color: cadetblue;
padding: 1em;
color: #d9480f;
}.wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 /span 2;
grid-row: 1;
}
.two {
grid-column: 3/span 2;
grid-row: 1;
}
.three {
grid-column: 5 /span 2;
grid-row: 1;
}
.four {
grid-column: 1/ span 3 ;
grid-row: 2;
}
.five {
grid-column: 4 / span 4;
grid-row: 2;
}
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</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>