CSS - Grid Layout

CSS Grid Layout is a two-dimensional layout system for developing responsive webpages. In this tutorial we will learn how to design a webpage layout using grid systems.

What is a Grid Layout?

Grid Layout used to enhance user experience over all the user devices by providing a responsive and flexible arrangement of HTML components over the webpage.

Grid is ideal for creating overall layout of a webpage, whileflexboxis mostly used to align items inside a container.

Table of Contents

Grid ElementsDisplay Grid PropertyGrid Rows and ColumnsGrid GapGrid LinesCSS Grid Properties Reference

Grid Elements

In a grid layout system, we have two elements,Grid ContainerandGrid Item.

Grid Container

Grid container defines the outer element of grid, where all the child elements are present. A grid container can be defined by settingdisplay: gridordisplay: inline-grid

Grid items

Grid items are all the direct elements inside grid container. This items can be arranged vertically and horizontally inside flexbox container based on need.

Display Grid Property

A HTML element become a grid container if we set value of display property asgridorinline-grid.All direct children of the grid container automatically become grid items.

• grid:This value defines block level grid container, means it behave like a block element taking full width available. ( Similar to div )
• inline-grid:This value defines inline level grid container, means it behave like a inline element taking as much width as it’s content. ( Similar to span )

Example

Following example show the difference between grid and inline-grid

Grid Rows and Columns

In CSS, we can define the number of columns and rows required in our layout. Each cell will represent a grid item. Following code shows how to define rows and columns in grid.

Example

In this example we will create two grid layout one is for row and another one is for column, each grid has row and column but showing them individually will help you to crack the rows and columns.

Grid Gap

The grid gap properties are used to add gaps between rows and columns of grid items. We have three properties associated with this,gap, column-gapandrow-gap.

Thegapproperty can set equal gap for both row and column, whilerow-gapandcolumn-gapcan set different gap values for row and column. Row value and column value have more preference over gap value, so if we define all three row value and column value will override over gap value.

Example

Here in this example we tried to explain the gap between grid items.

CSS Grid Lines

In CSS, Grid items can be placed according to the imaginary ines between grid cell called grid items. The lines between columns are called column lines and lines between rows are called row lines.

CSS Grid Properties Reference

Following is the list of CSS properties related to grid:

propertyvalueExampledisplayDefine whether an element is a grid container or an inline grid container.Try ItgapDefines the gap between rows and columns.Try Itgrid-areaDefines the location and size of the grid item within a grid layout.Try Itgrid-columnControl the placement of a grid item within the grid container in the column direction.Try Itgrid-rowControl the placement of a grid item within the grid container in the row direction.Try Itgrid-templateSpecify the grid columns, grid rows and grid areas.Try Itgrid-auto-columnsDetermines the size of automatically generated grid column tracks or a pattern of such tracks.Try Itgrid-auto-rowsDetermines the size of automatically- generated grid rows tracks or a pattern of such tracks.Try Itgrid-auto-flowSpecifies arrangement of the grid item within the grid.Try It