Absolutely not! Especially if you work with CSS Grid

[najmusseoex]

So let's say, for example, that our goal is to create a simple 2-column, 3-row layout, basically the layout described in the next image.

Grid Sections with CSS Grid
As you can see from the image above, my intent is to create a grid system list of papua new guinea consumer email where the width of the columns is defined in percentage while the width of the rows has two sections defined in pixels and the central one will adapt based on the content it has to present.

This is a very common situation when building a website, all that remains to be discovered now are the properties that allow us to define this structure.

I'll immediately stop building tension around this topic and introduce you to the functions grid-template-rowsand grid-template-columnswhich have a really powerful syntax.

CSS
1
.container {
2
display : grid ;
3
​
4
grid-template-rows : 150px auto 150px ; /* As in the example above */
5
grid-template-rows : 250px 800px 400px ; /* Three rows with fixed dimensions */
6
grid-template-rows : repeat ( 3 , 275px ); /* Three rows with the same size */
7

8
grid-template-columns : 25% 75% ; /* As in the example above */
9
grid-template-columns : 100px 100px 100px 100px ; /* Four columns with the same dimensions */
10
grid-template-columns : repeat ( 4 , 100px ); /* Four columns with the same size */
11
}
As you can see from this simple example, there are several ways that allow us to define the rows and columns of our new layout and the even better thing is that we don't even have to specify which elements these should be applied to!

With floateverything it was much messier…

Element by element we had to declare width, margins and padding but fortunately with CSS Grid all this is a thing of the past. Now we can define the entire structure of a grid inside a single container element.

I'm sure you're trying to find the moment when this new module turns out to be a scam, but from what I've tried so far I have to confess that I haven't found anything bad yet, on the contrary. CSS Grids allow you to create layouts that weren't even possible with Flexbox, but since these two modules work well together here's my personal definition:

With CSS Grid you define the general layout of the web page while with Flexbox you can outline how the elements should behave within each area.

Now that we have also defined a point of arrival regarding this aspect, let's find out how it is possible to tell the browser that we want to create a structure of this type: