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/
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>
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>
I have the following layout:
.container {
width: 630px;
height: 630px;
display: grid;
column-gap: 10px;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto auto auto;
}
.first, .second, .third, .fourth, .fifth, .sixth, .seventh {
width: 200px;
height: 200px;
background-color: pink;
}
.first, .second {
height: 400px;
}
.fourth {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: yellow;
}
.seventh {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
<div class='container'>
<div class='first'>1</div>
<div class='second'>2</div>
<div class='third'>3</div>
<div class='fourth'>4</div>
<div class='fifth'>5</div>
<div class='sixth'>6</div>
<div class='seventh'>7</div>
</div>
I would like the first and second column to have 2 rows, taking 3fr 1fr and the last column to have 3 rows taking up 2fr 1fr 1fr. The end result would be that box number 4 is nested between number 3 and 7 without breaking out of the rectangle that boxes in the first two columns created.
This final positioning should look like this:
Is this possible using css grid, and how do I do it?
You can try like below:
.container {
width: 700px;
height: 700px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
grid-gap: 20px;
}
.first,
.second,
.third,
.fourth,
.fifth,
.sixth,
.seventh {
width: 100%;
height: 100%;
background-color: pink;
}
.first,
.second {
grid-row: 1 / 3;
}
.second,
.sixth {
}
.fourth {
background-color: yellow;
}
<div class='container'>
<div class='first'>1</div>
<div class='second'>2</div>
<div class='third'>3</div>
<div class='fourth'>4</div>
<div class='fifth'>5</div>
<div class='sixth'>6</div>
<div class='seventh'>7</div>
</div>
Is this what you wanted.
You can read more about grid-row here
Run snippet to see it working below
.container {
width: 700px;
height: 700px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
grid-gap: 20px;
}
.first,
.second,
.third,
.fifth,
.sixth,
.seventh {
background-color: pink;
}
.first,
.second {
grid-row: 1 / 3;
}
.fourth {
background-color: yellow;
}
<div class='container'>
<div class='first'>1</div>
<div class='second'>2</div>
<div class='third'>3</div>
<div class='fourth'>4</div>
<div class='fifth'>5</div>
<div class='sixth'>6</div>
<div class='seventh'>7</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>