Advanced CSS: Get Going with Grid
CSS Grid brings a native, two-dimensional grid system to CSS for the first time. It gives us the grid layout flexibility of rows and columns without having to use floats, positioning, or a framework (i.e. Bootstrap). Grid was launched only a handful of years ago and is already enjoying full support in all modern browsers as its usage continues to grow.
To create a grid container, let’s make a declaration of “display: grid;” on the .container class selector. This will specify that .container is the parent element. The grid container has a column axis and a row axis. The grid container’s children are known as grid items. Let’s create 6 divs within the grid container, they will be our grid items.
Let’s add some more declarations to the container. The grid-template-rows property specifies the number and the height of the grid items in the row axis. The grid-template-columns property specifies the number and the width of the grid items in the column axis. Let’s give each grid item a background color as well to help keep track of them:
Our grid container now has 2 rows and 3 columns. Row 1 has a height of 100px and contains box 1, box 2, box 3. Row 2 has a height of 150px and contains box 4, box 5, box 6. Our 3 columns go from left to right. Column 1 has a width of 100px and contains box 1, box 4. Column 2 has a width of 150px and contains box 2, box 5. Column 3 has a width of 200px and contains box 3, box 6.
You may notice that our grid container is accommodating exactly 6 grid items (2 x 3), but what does this look like if we remove the 3rd grid-template-column? Take a look:
The last two grid items are dropped to the bottom of the columns and stretch to the width of each column. Their height is determined by the size of their content.
Let's look at two other properties that behave just as their name implies. The row-gap (previously grid-row-gap) property sets the size of the gap, or gutter, between a grid container’s rows. The column-gap (previously grid-column-gap) property does the same for the grid container’s columns. Let’s add them to our container:
Grid also brings a new unit of measurement to CSS, the fr (fractional unit). Adding a number in front of fr will determine what fraction of the container the child should occupy. Let’s also set a width and height for the grid container so we have more control over the fr units:
Let’s make the size of our rows and columns the same by using “repeat” and specifying a size. We can also declare a gap (previously grid-gap) property that sets the gap size for both the rows and the columns:
We can still place columns and rows with different measurements outside of the repeat. Let’s repeat 2 of the columns and give our third column a new fr unit like so:
We can also use % percentages as measurements and combine the different units. The grid item’s % will be calculated from the entire size of the width or height depending on row or column. The fractions are determined after gap size is taken into account as well. Fr units will be calculated within the remaining space:
Here’s one last example to demonstrate how percentage and gap are calculated before fractional units:
Those are the basics of CSS Grid and should be enough to get you started!
Here’s a link to the codepen so you can explore more on your own: https://codepen.io/kylefarmer85/pen/XWpzzbE
