This content originally appeared on DEV Community and was authored by Benny Powers 🇮🇱🇨🇦
Today I completed a fun little challenge using CSS Grid.
The goal was to update a layout that relied on container elements and flexbox.
<div class="cards">
<pfe-card id="a-1">...</pfe-card>
<pfe-card id="a-2">...</pfe-card>
<pfe-card id="a-3">...</pfe-card>
<pfe-card id="a-4">...</pfe-card>
</div>
<div class="cards">
<pfe-card id="b-1">...</pfe-card>
<pfe-card id="b-2">...</pfe-card>
<pfe-card id="b-3">...</pfe-card>
<pfe-card id="b-4">...</pfe-card>
</div>
.cards {
display: flex;
flex-flow: row wrap;
}
.cards > * {
margin-bottom: 15px;
margin-right: 15px;
min-width: 200px;
width: calc(25% - 32px);
}
My first step was to remove the container elements and 'lift up' the flex properties into the grid container
<pfe-card id="a-1">...</pfe-card>
<pfe-card id="a-2">...</pfe-card>
<pfe-card id="a-3">...</pfe-card>
<pfe-card id="a-4">...</pfe-card>
<pfe-card id="b-1">...</pfe-card>
<pfe-card id="b-2">...</pfe-card>
<pfe-card id="b-3">...</pfe-card>
<pfe-card id="b-4">...</pfe-card>
:host {
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(
200px,
calc(25% - 32px)));
grid-auto-rows: max-content;
gap: 15px;
}
This did most of the job on its own, but there was one issue: in the original layout, card b-1 appeared in a new 'row' below the first set of cards. How could I emulate this 'row-clearing' behaviour? Using grid-column, I specified the position of the first card in the second set:
#b-1 {
grid-column: 1/2;
}
Now, that one specific card 'resets' it's whole row, replicating the original behaviour, but with fewer non-semantic elements, and less CSS.
nice
This content originally appeared on DEV Community and was authored by Benny Powers 🇮🇱🇨🇦
Benny Powers 🇮🇱🇨🇦 | Sciencx (2022-01-06T19:14:26+00:00) Clearing Rows with CSS Grid. Retrieved from https://www.scien.cx/2022/01/06/clearing-rows-with-css-grid/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.