Tuesday Tips | Four CSS Grid Properties You Can Use to Create Layouts

Today is April 7, 2020, and for this Tuesday Tips episode we're
covering The Four CSS Grid Properties You Need to Create Layouts


Let's dive in!


----


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.


----


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.


----


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.


----


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!


----


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.


----


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.


----


Today’s Tuesday Tips was adapted from a post on CSS-Tricks.


----


Want to know more? Head to fewdaily.com for more of today’s
topics and other front-end web content! If you liked what you
heard be sure to rate, review, and subscribe on your platform of
choice. That's all for today, tune in tomorrow!