Why a grid?
There are many reasons out there to display content as a well structured grid. Someone needs a small image gallery, the other one needs to display products or maybe a simple portfolio. And over all there is this trend to put content in 'cards' to structure the UI.
Especially when you are in a component-based environment, it is very handy and powerful, to put the layout in the container-element so the child-components will just use it without any worries.
Wouldn't it be nice, to have an easy solution with CSS, to start with?
Here is one, using the implicit grid:
The HTML
We wanna keep it simple, with a container and some cards/items/elements inside of it.
<body>
<main>
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
<div class="card">11</div>
</main>
</body>
The <main> is our container. Every direct child should be displayed in a nice grid.
'nice' in this context means:
- elements get the same width
- the same hight
- on every screen size
So yes, of course it has to be responsive!
The CSS
So let's define our container via display: grid and add some 'CSS-magic':
main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: minmax(150px, 1fr);
}
These three lines are all you need to define a simple and responsive grid.
So, what happens:
1. we define <main> to be displayed as grid.
Easy.
2. we define columns
-
repeatgenerates a column or a pattern of columns in a given amount.- The amount of columns is the first value. The size or pattern is the second value.
-
auto-fitis used, coz we don't know a fix number of columns. We just want as much columns as are fitting on the screen. So we let the browser generate this number for us. -
minmax(300px, 1fr)defines the size of each column. The size is fluid between the first and second value. So we set 300px as minimal size for each grid-item and with 1fr we make sure, the items always keep the same size.
More about this pattern: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
3. we define rows
This minmax() function is used to set a minimal height for each grid-item, but also to define that all items will have the same height.
You could remove this line, if you don't want this even-height behavior and the rest of the responsive grid will work as expected.
Beautify
Of course a grid-ui has some gaps between it's children, so let's add this:
main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: minmax(150px, 1fr);
grid-gap: 2rem;
}
Also, sometimes a grid-item can be more important than others, so you change it's size (e.g. grid-column: span 2;). In this cases you can generate empty spots in your well structured grid. To avoid this we add another line:
main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: minmax(150px, 1fr);
grid-gap: 2rem;
grid-auto-flow: dense;
}
Demo
(open it in new window to better see the responsive behavior)
Top comments (0)