As we know, CSS, which stands for Cascading Style Sheets, is all about styling a webpage, and this includes the layout. Before the grid layout was introduced, tables were first used for creating layouts for web pages. Then came floats, positioning, and flex-box, which of course is a great layout tool but is limited to a one-dimensional flow.

The CSS grid layout is a two-dimensional layout system (rows and columns) that makes it easier to design web pages without having to worry about hacking our way around layout problems. The grid layout also makes it easier to create responsive web pages.

Terms used in CSS Grid

Before diving into the concept of CSS grid, it is important to look at some of the terms involved.

1. Grid Layout: A grid layout basically consists of a parent element (container) with one or more child elements.

2. Grid container: This is the parent element that houses all the child/children element(s), and on which the display: grid property is applied.

3. Grid items: These are the direct descendants (children) of the grid container.

4. Grid columns: These are the vertical lines of the grid items.

5. Grid rows: These are the horizontal lines of the grid items.

6. Grid gaps: This consists of (a) column gap — space between each column, and (b) row gap — space between each row.

7. Grid Lines: The lines between the columns are column lines, while the lines between the rows are row lines.

CSS Grid Properties

There are properties that can be applied to the grid container and the grid items.

Properties for the Grid Container

1. display: The display property should be applied to the grid container, and the value can either be grid or inline-grid.

2. grid-template-columns: defines the number of columns in the layout as well as the width of each column.

3. grid-template-rows: defines the number of rows in the layout as well as the height of each row.

4. justify-content: used to horizontally align the grid items inside the grid container. However for this property to have any effect, the grid container’s total width has to be more than the grid items’ width.

5. align-content: used to vertically align the grid items inside the grid container. However for this property to have any effect, the grid container’s total height has to be more than the grid items’ height.

6. justify-items: used to align the grid items along the row axis.

7. align-items: used to align the grid items along the column axis.

Let’s take a look at the representation.

Here, a grid layout consisting of a grid container with the class of container, and grid items each represented with classes div-one, and div-two……… was created.

Each grid item was given a background color to distinguish it. The grid items are stacked on each other because the default display property of the div element is block.

The display: grid property was set on the grid container. The grid-template-columns property was used to specify that the grid layout should contain three columns, with the first column, the second column, and the third column having a width of 100px respectively. The gap property, which is a shorthand way of writing row-gap and column-gap was used to space the grid items horizontally and vertically.

The justify-content, justify-items, align-content, and align-items properties can consist of different values:

a) Center: This moves all the grid items to the center horizontally (along the x-axis).

b) Space-between: Grid items are evenly distributed, with the first and the last rows pinned to the ends of the container.

c) Space-around: This distributes an even amount of space between each grid item, with half-sized spaces on the far ends.

d) Start: Aligns the grid items to the start of the grid container.

e) End: Aligns the grid items to the end of the grid container.

Properties for the Grid Items

a) grid-column: The shorthand form of writing grid-column-start + grid-column-end. It defines which columns to place a grid item.

b) grid-row: The shorthand form of writing grid-row-start + grid-row-end. It defines which rows to place a grid item.

c) grid-area: This is the shorthand for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties. This property can also be used to name the grid item.

Please note that there are other concepts not covered in this article. Check out W3Schools, MDN, and CSS Tricks for a better understanding of how CSS Grid works.