\n
The CSS for this layout:
\n.grid {\n display: grid;\n}\n.grid :nth-child(2) {\n grid-column-start: 2;\n}\n.grid :nth-child(3):last-child {\n grid-column-start: span 2;\n}\n
\nI am trying to do something similar but different, but I cannot get it. This is a picture of what I want to achieve:
\n\n","author":{"@type":"Person","name":"arthur"},"upvoteCount":0,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"You can use the CSS nth-last-child selector to spot when the first child is the first of three children.
\n.grid {\n display: grid;\n}\n\n.grid :nth-child(2) {\n grid-column-start: 2;\n}\n\n.grid :nth-child(1):nth-last-child(3) {\n grid-row-start: span 2;\n}\n\n\n/**/\n\n.grid {\n width: 300px;\n aspect-ratio: 1;\n grid-gap: 5px;\n outline: 2px solid red;\n vertical-align: top;\n margin: 10px;\n counter-reset: num;\n}\n\n.grid * {\n border: 2px solid;\n font-size: 30px;\n box-sizing: border-box;\n font-family: sans-serif;\n display: grid;\n place-content: center;\n}\n\n.grid *:before {\n content: counter(num);\n counter-increment: num;\n}
\r\n<div class=\"grid\">\n <div></div>\n</div>\n<div class=\"grid\">\n <div></div>\n <div></div>\n</div>\n<div class=\"grid\">\n <div></div>\n <div></div>\n <div></div>\n</div>\n<div class=\"grid\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n</div>
\r\nReputation: 39
I am trying to make a dynamic grid layout containing 1-4 elements. They achieved something close to what I am looking for at https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/ under the "dynamic layouts" section. But slightly different.
The CSS for this layout:
.grid {
display: grid;
}
.grid :nth-child(2) {
grid-column-start: 2;
}
.grid :nth-child(3):last-child {
grid-column-start: span 2;
}
I am trying to do something similar but different, but I cannot get it. This is a picture of what I want to achieve:
Upvotes: 0
Views: 279
Reputation: 36646
You can use the CSS nth-last-child selector to spot when the first child is the first of three children.
.grid {
display: grid;
}
.grid :nth-child(2) {
grid-column-start: 2;
}
.grid :nth-child(1):nth-last-child(3) {
grid-row-start: span 2;
}
/**/
.grid {
width: 300px;
aspect-ratio: 1;
grid-gap: 5px;
outline: 2px solid red;
vertical-align: top;
margin: 10px;
counter-reset: num;
}
.grid * {
border: 2px solid;
font-size: 30px;
box-sizing: border-box;
font-family: sans-serif;
display: grid;
place-content: center;
}
.grid *:before {
content: counter(num);
counter-increment: num;
}
<div class="grid">
<div></div>
</div>
<div class="grid">
<div></div>
<div></div>
</div>
<div class="grid">
<div></div>
<div></div>
<div></div>
</div>
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Upvotes: 3