html

What is CSS Grid?

Assigning appropriate positions to elements is highly significant when designing a website. There are various properties and layouts available in CSS that help perform this task. One such layout is the CSS Grid Module which arranges elements into rows and columns. The focus of this article is to emphasize what this layout is and how it can be used.

Let’s get started.

What is CSS Grid

Grid is a CSS layout model that allows its users to arrange elements appearing on a website into various rows and columns. This model basically partitions a web page into sections and aligns elements without having to go through the trouble of using positioning and floats.

A grid positions elements with respect to either the web page or other elements present on the web page. Below we have shown a visual representation of a CSS grid layout.

A grid layout model works with all latest browsers. It consists of two components which are grid container and grid items. Below we have explained them in detail.

Grid Container

A grid container is a parent element that holds grid items placed within rows, and columns. For the purpose of making an element adopt the behavior of a grid container set its display property to either grid or inline-grid.

Grid Items

A grid item is a child element that is present inside a grid container. Inside a container by default, there is one item present for each column, in each row. However, you can span grid items across numerous rows and columns.

Here is a graphical representation of the grid container, and grid items.

As already mentioned, a CSS grid divides a web page into rows, and columns to arrange elements. These rows and columns along with other important grid terminologies are explained below.

Columns in a Grid

The vertical lines in a grid within which items are placed are regarded as columns in a grid. A grid system can have at least two and at most twelve or more columns.

Rows in a Grid

The horizontal lines in a grid within which items are placed are regarded as rows in a grid. A grid system can have numerous rows.

Gaps in a Grid

The area between each row, and column is referred to as gaps.

Lines in a Grid

The lines between each row is referred to as row lines, whereas, lines between each column is referred to as column lines.

There are many properties linked to the CSS grid. Consult the next section to learn about them.

Grid Properties

The table below provides an overview of the grid layout properties.

Properties Description
grid-template-columns This property states the number and size of columns in a grid layout.
grid-template-rows It describes the size of rows in a grid system.
grid-template-areas This property assigns names to various items in a grid.
grid-auto-columns It sets the initial size of a column.
grid-auto-rows This property sets the initial size of a row.
grid-auto-flow It states how items that are auto-placed are positioned in a grid system.
grid-row-start This property states where to begin an item in a grid.
grid-column-start It performs the same function as the above property.
grid-row-end
grid-column-end It performs the same function as the above property.
grid-area This property is used to name a specific grid area.
row-gap This property states a gap between rows.
column-gap It states gap between columns.

Let’s understand grid system further with the help of an example.

Example

In the example demonstrated below we have created a simple grid layout. The sketch of the grid is shown below.

Let’s start the coding.

HTML

<div class="container">
  <div class="item one">A</div>
  <div class="item two">B</div>
  <div class="item three">C</div>
  <div class="item four">D</div>
</div>

Here we have simply nested four div containers inside a bigger div container. Each of the div element has been assigned some class.

CSS

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 120px 120px 120px;
}

Using the class “container” assigned to the bigger div, we are displaying it as a grid. Moreover, assigned a gap of 5px between rows and columns. Lastly, we have created three columns with a size of 120px each using the grid-template-columns property.

CSS

.item {
  background-color: sandybrown;
  color: white;
  border-radius: 6px;
  padding: 25px;
  font-size: 20px;
  }

Now we are simply styling the items present inside the grid container using some basic CSS properties.

CSS

.one {
  grid-column: 1 / 3; /* specifies the location and size of item within a column */
  grid-row: 1; /* specifies the location and size of item within a row */
  }

The grid-column property sets the starting and ending position of the grid item in a column, meanwhile, the grid-row property defines the position of an item in a row. For instance, in the above code snippet, item 1 will start displaying in column 1 and end in column 3, whereas, it will be displayed in row 1.

CSS

.two {
  grid-column: 3 ;
  grid-row: 1 / 3;
  }
.three {
  grid-column: 1 ;
  grid-row: 2 ;
  }
.four {
  grid-column: 2;
  grid-row: 2;
  }

Using the grid-column, and grid-row properties the positions of rest of the items are also being specified.

Output

A simple grid layout has been generated.

Conclusion

A grid layout model allows its users to arrange elements appearing on a website into various rows and columns. This model basically partitions a web page into sections and aligns elements with respect to either the web page or other elements present on the web page. It consists of various elements which are grid container, and grid items. A grid container is the parent element, whereas grid items are children elements. This write-up discusses all necessary details of grid layout along with graphical representations, and an appropriate example.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.