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, while flexbox is mostly used to align items inside a container.

Grid Elements
Display Grid Property
Grid Rows and Columns

Grid Gap
Grid Lines
CSS Grid Properties Reference

Grid Elements

In a grid layout system, we have two elements, Grid Container and Grid 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 setting display: grid or display: 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 as grid or inline-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

<!DOCTYPE html><html lang="en"><head><style>
  .grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 10px;
     width: 100%;
     background-color: lightblue;
  }
  .inline-grid-container {
     display: inline-grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 10px;
     background-color: lightgreen;
  }
  .grid-item {
     background-color: lightcoral;
     padding: 20px;
     text-align: center;
  }   </style></head><body><h3>Inline Grid Example</h3><p>
     Here is an example of 
     &lt;span class="inline-grid-container"&gt;&lt;span class="grid-item"&gt;1&lt;/span&gt;&lt;span class="grid-item"&gt;2&lt;/span&gt;&lt;span class="grid-item"&gt;3&lt;/span&gt;&lt;/span&gt; 
     inline grid.
   </p><h3>Grid Example</h3><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div></body></html>

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.

<!DOCTYPE html><html lang="en"><head><style>
    .grid-container {
        display: grid;
        gap: 10px;
        padding: 10px;
        width: 75%;
    }
    .grid-item {
        background-color: #4CAF50;
        border: 1px solid #ddd;
        padding: 20px;
        text-align: center;
        font-size: 1.2em;
        color: white;
    }
    .row{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }
    .column{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;Grid Layout Example&lt;/h1&gt;&lt;h3&gt;Grid Rows - 3 Rows X 1 Column&lt;/h3&gt;&lt;div class="grid-container row"&gt;&lt;div class="grid-item item1"&gt;
     Item 1
  &lt;/div&gt;&lt;div class="grid-item item2"&gt;
     Item 2
  &lt;/div&gt;&lt;div class="grid-item item3"&gt;
     Item 3
  &lt;/div&gt;&lt;/div&gt;&lt;h3&gt;Grid Columns - 1 Row X 3 Columns &lt;/h3&gt;&lt;div class="grid-container column"&gt;&lt;div class="grid-item item1"&gt;
     Item 1
  &lt;/div&gt;&lt;div class="grid-item item2"&gt;
     Item 2
  &lt;/div&gt;&lt;div class="grid-item item3"&gt;
     Item 3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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-gap and row-gap.



The gap property can set equal gap for both row and column, while row-gap and column-gap can 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.



<!DOCTYPE html><html lang="en"><head><style>
  .grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 100px 100px 100px;
     /* Sets both row and column gaps to 20px */
     gap: 20px; 
     /* Make gap between rows as 10px (override) */
     row-gap: 10px; 
     /* Make gap between columns as 5px (override) */
     column-gap: 5px; 
  }
  .grid-item {
     background-color: #4CAF50;
     border: 1px solid #ddd;
     padding: 20px;
     text-align: center;
     font-size: 1.2em;
     color: white;
  }   </style></head><body><h1>Grid Gap Example</h1><div class="grid-container"><div class="grid-item">
     Item 1
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 2
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 3
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 4
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 5
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 6
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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:



property value Example
display Define whether an element is a grid container or an inline grid container. Try It
gap Defines the gap between rows and columns. Try It
grid-area Defines the location and size of the grid item within a grid layout. Try It
grid-column Control the placement of a grid item within the grid container in the column direction. Try It
grid-row Control the placement of a grid item within the grid container in the row direction. Try It
grid-template Specify the grid columns, grid rows and grid areas. Try It
grid-auto-columns Determines the size of automatically generated grid column tracks or a pattern of such tracks. Try It
grid-auto-rows Determines the size of automatically- generated grid rows tracks or a pattern of such tracks. Try It
grid-auto-flow Specifies arrangement of the grid item within the grid. Try It

What is a Grid Layout?

Table of Contents

Grid Elements

Grid Container

Grid items

Display Grid Property

Example

Grid Rows and Columns

Example

Grid Gap

Example

CSS Grid Lines

CSS Grid Properties Reference

Comments

Leave a Reply Cancel reply

More posts

Deficit Financing and Public Debt?

What are the main types of Unemployment?

Fiscal Policy vs Monetary Policy?

Nominal GDP and Real GDP?

property	value	Example
display	Define whether an element is a grid container or an inline grid container.	Try It
gap	Defines the gap between rows and columns.	Try It
grid-area	Defines the location and size of the grid item within a grid layout.	Try It
grid-column	Control the placement of a grid item within the grid container in the column direction.	Try It
grid-row	Control the placement of a grid item within the grid container in the row direction.	Try It
grid-template	Specify the grid columns, grid rows and grid areas.	Try It
grid-auto-columns	Determines the size of automatically generated grid column tracks or a pattern of such tracks.	Try It
grid-auto-rows	Determines the size of automatically- generated grid rows tracks or a pattern of such tracks.	Try It
grid-auto-flow	Specifies arrangement of the grid item within the grid.	Try It