CSS grid layout with different width for nth-child
Solution 1
Set the repeat
/ auto-fit
function to a small width that can serve as a common denominator.
In this case, 100px will do.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
}
Then, set the first four elements to span three columns.
Set the following elements to span two columns.
.item:nth-child(-n + 4) { grid-column: span 3; }
.item:nth-child(n + 5) { grid-column: span 2; }
revised codepen (CSS compiled)
.container {
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
justify-content: center;
grid-gap: 30px;
background-color: #ddd;
}
.item:nth-child(-n + 4) { grid-column: span 3; }
.item:nth-child(n + 5) { grid-column: span 2; }
.item {
padding: 10px;
color: white;
font-family: sans-serif;
font-size: 30px;
background-color: orangered;
}
.container .item--1 { background-color: orangered; }
.container .item--2 { background-color: yellowgreen; }
.container .item--3 { background-color: blueviolet; }
.container .item--4 { background-color: palevioletred; }
.container .item--5 { background-color: royalblue; }
.container .item--6 { background-color: goldenrod; }
.container .item--7 { background-color: crimson; }
.container .item--8 { background-color: darkslategray; }
<div class="container">
<div class="item item--1">A</div>
<div class="item item--2">B</div>
<div class="item item--3">C</div>
<div class="item item--4">D</div>
<div class="item item--5">E</div>
<div class="item item--6">F</div>
<div class="item item--7">G</div>
<div class="item item--8">H</div>
</div>
Solution 2
Not sure what layout are you looking for, but seems to be that you need to use grid-column
in .item
and span
ning the item through the columns, the 2
in the code is for demo, you can choose the number of columns to span as you wish.
.container {
width: 100%;
margin: auto;
background-color: #ddd;
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.container .item:nth-child(-n+4) {
grid-column: span 2
}
.container .item {
padding: 10px;
color: white;
font-family: sans-serif;
font-size: 30px;
background-color: orangered;
}
.container .item--1 {
background-color: orangered;
}
.container .item--2 {
background-color: yellowgreen;
}
.container .item--3 {
background-color: blueviolet;
}
.container .item--4 {
background-color: palevioletred;
}
.container .item--5 {
background-color: royalblue;
}
.container .item--6 {
background-color: goldenrod;
}
.container .item--7 {
background-color: crimson;
}
.container .item--8 {
background-color: darkslategray;
}
<div class="container">
<div class="item item--1">A</div>
<div class="item item--2">B</div>
<div class="item item--3">C</div>
<div class="item item--4">D</div>
<div class="item item--5">E</div>
<div class="item item--6">F</div>
<div class="item item--7">G</div>
<div class="item item--8">H</div>
</div>
user3142
Updated on June 16, 2022Comments
-
user3142 about 2 years
I would like to have a grid layout with the first four elements with the width equal to 300px while keeping the other elements a different width value (200px to be exactly):
Basically, I'm trying to solve this problem by declaring
grid-template-columns
two times, as in the code below:grid-template-columns: repeat(auto-fit, 200px); grid-template-columns:nth-child(-n+4){ grid-template-columns: repeat(4, 300px);
But it's not working.
Is grid layout the right approach to do this? Can I achieve the same results with Flexbox and grid layout maybe?
Here is the CodePen with my progress so far https://codepen.io/williamjamir/pen/GQYqrK
.container { width: 100%; margin: auto; background-color: #ddd; display: grid; justify-content: center; grid-gap: 30px; grid-template-columns: repeat(auto-fit, 100px); } @media screen and (min-width: 400px) { .container { grid-template-columns: repeat(auto-fit, 200px); } .container .container:nth-child(-n + 4) { grid-template-columns: repeat(4, 300px); } } .container .item { padding: 10px; color: white; font-family: sans-serif; font-size: 30px; background-color: orangered; } .container .item--1 { background-color: orangered; } .container .item--2 { background-color: yellowgreen; } .container .item--3 { background-color: blueviolet; } .container .item--4 { background-color: palevioletred; } .container .item--5 { background-color: royalblue; } .container .item--6 { background-color: goldenrod; } .container .item--7 { background-color: crimson; } .container .item--8 { background-color: darkslategray; }
<div class="container"> <div class="item item--1">A</div> <div class="item item--2">B</div> <div class="item item--3">C</div> <div class="item item--4">D</div> <div class="item item--5">E</div> <div class="item item--6">F</div> <div class="item item--7">G</div> <div class="item item--8">H</div> </div>
-
user3142 over 6 yearsI've added these values to simplify the problem since the actual values are somewhat asymmetric (their common multipliers are prime numbers). But I will give you the answer because finding the common denominator is good call anyway.