There are four core CSS Grid properties that make up a vast majority of the grid utility. Essentially, if you can master these four you can handle the basics of creating a grid and placing your page elements inside it.
Displaying the Grid
Before using these four grid properties we of course must set the display property to grid. Once we do that we have put our child elements inside a grid. You can also create multiple grids on one page to ensure that your layout doesn’t get too out of hand.
Grid-Template-Columns
The first property that we’re going to discuss is grid-template-columns. This is applied to the grid container element and is used to define the columns of the grid. This property doesn’t just layout the columns but the widths of those columns. If you were to set this property to 200px 200px 200px, your grid would have three columns each 200px wide.
Grid-Template-Rows
The second property, similarly defined on the grid containing element we made, is grid-template-rows. This functions the exact same way as grid-template-columns but defines the number and heights of the rows.
For both the properties you can use values common to some other properties, like percentages, auto or px. But a great feature of grids is the fractional value, or fr. This value takes up a fraction of the space remaining, so in its basic form it is similar to percentages in that if you set the three columns each to 1fr they would each take up one third of the width. However, it can also be used in combination with other values.
For example, if we set the columns to 200px 1fr 2fr, the first column would be 200px wide the second would take up 1 fraction of the remaining space and the third would take up two fractions of the remaining space. So, the second column would be one-third of the remaining space and the last column would fill up the remaining two-thirds. This allows for some pretty dynamic layouts!
Grid-Gap
The third property is grid-gap, also set on the grid containing element. This sets the spacing between all grid elements, however it is different from a margin because there is no spacing around the outside of the grid. Think of it as if the grid was a tic-tac-toe board, the grid gap would be the spacing where the lines are drawn, so where two boxes touch. This property can be more specific by using grid-column-gap or grid-row-gap to set these values independently.
Grid-Column and Grid Row
The final properties are grid-column and grid-row which allow us to place child elements in the grid. You can set span values for these properties on the child elements to delineate how many rows and / or columns that element should take up. So, for example, you could set the child element’s grid-column property to span 3 and it would go across three grid columns.
With these handful of CSS Grid properties you can quickly and easily create website layouts. It is especially great for creating a wireframe or low fidelity mockup. Once you’ve mastered these you’ll feel confident taking on the more advanced properties.
Credit
Today’s Tuesday Tips was adapted from a post on CSS-Tricks.