Introduction to GRID Layout in CSS

CSS Grid Layout simplifies the creation of complex layouts by organizing the layout into rows and columns, making it easier to design web pages. Similar to Flexbox, Grid allows us to create layouts with greater consistency and ease by dividing the page into rows and columns.

Defining a grid

To define a container as a grid layout, use the display property. Just like display: flex for a Flexbox container, use display: grid for a Grid layout container.

.grid{
    display: grid;
}

In the above example, .grid is the class of the container, which we are selecting using a class selector in CSS and setting the display of the container as grid.

By default, setting display: grid on an HTML element will create a 1-column grid, meaning the elements inside the container will be stacked vertically, one below the other.

Organize your elements in more columns

To add more columns to your grid, use the grid-template-columns property on the container.

.grid{
    display: grid;
    grid-template-columns: 20% 40% 30%;
}

In this example, grid-template-columns: 20% 40% 30% will divide the layout into 3 columns with widths of 20%, 40%, and 30% respectively. Instead of percentages, you can use any length unit like rem, em, px, etc.

fr unit in grid:

The fr unit in Grid is used to allocate a fraction of the available width within a grid container. It removes the need to calculate percentages or fixed widths.

.grid{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

As shown in the image, grid-template-columns: 1fr 2fr 1fr will divide the container's width into 4 parts and allocate 1 part to the first column, 2 parts to the second column, and 1 part to the third column.

The fr unit is specifically used for the grid-template-rows and grid-template-columns properties in CSS.

Gaps in grid:

In CSS Grid, there are three properties to create space between items within the container:

1. column-gap : Specifies the gap between columns.

2. row-gap: Specifies the gap between rows.

3. gap: A shorthand property that sets both column-gap and row-gap (e.g., gap: row-gap column-gap).

.grid{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px 100px;
}

In the example above, the gap property (formerly grid-gap) is used to provide spacing between elements. The value gap: 10px 100px creates a 10px gap between rows and a 100px gap between columns.

Advanced functions and features:

Repeat function:

The repeat() function in CSS Grid Layout allows you to define a repeating pattern for rows or columns, making your code more concise and manageable.
For example, grid-template-columns: repeat(3, 1fr) This creates three columns, each taking up a size of 1fr, similar to writing grid-template-columns: 1fr 1fr 1fr;

Minmax function:

The minmax() function allows you to set a minimum and maximum size for a track (row or column). It is useful when the track's size cannot accommodate its content, causing overflow.

Syntax: minmax(min,max)

In this case, if the content overflows, the rows will resize to the minimum height specified (100px) and try to fit the content. If it still overflows, you may need to adjust the minimum height or use other methods to contain it.

.grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: minmax(100px ,auto);
}

.grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: minmax(50px ,auto);
}

Implicit vs Explicit Grids

Explicit Grid:

An explicit grid is defined by specifying properties such as grid-template-columns and grid-template-rows.

Implicit Grid:

Implicit grids are created automatically when items are placed outside the bounds of the explicit grid. CSS generates additional rows and columns to accommodate these items. You can control their size using grid-auto-rows and grid-auto-columns. By grid-auto-rows and grid-auto-columns properties in grid, we can give implicit grid with a certain size.
e.g. if we use grid-auto-rows: 100px, it will set the row-size as 100px for the content that will be auto placed by CSS and the same goes for grid-auto-columns.

.grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 100px 100px 100px;
    grid-auto-rows: 50px;
    gap: 2px;
}

In this setup, the first three rows have a height of 100px, while subsequent rows have a height of 50px.

CSS Properties for grid-auto-flow:

• grid-auto-flow: controls how auto-placed items are inserted into the grid. By default, it is row.

• grid-auto-columns: controls the size of column track for auto-placed items.

• grid-auto-rows: controls the size of row track for auto-placed items

Item Placement Properties:

These properties are used to place items on the grid. You can visualize a grid as a matrix where rows and columns are divided by lines. For a grid with three rows and three columns, you have four column lines and four row lines. You can use these lines to position items using properties like:

• grid-column-start : Specifies the start line for a column.

• grid-column-end : Specifies the end line for a column.

• grid-row-start : Specifies the start line for a row.

• grid-row-end : Specifies the end line for a row.

• grid-column : A shorthand for grid-column-start and grid-column-end.

• grid-row : A shorthand for grid-row-start and grid-row-end.

      <div class="grid layout">
        <div class="item1">ITEM 1</div>
        <div class="item2">ITEM 2</div>
        <div class="item3">ITEM 3</div>
      </div>

.grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2px;
}

.item1{
    grid-column: 1/4;
    grid-row: 1/3;
}
.item2{
    grid-column: 1/3;
}

In this example,.item1occupies two rows and three columns, while.item2occupies two columns.

Layout-management with grid-template-areas:

The grid-template-areas property provides an alternative way to arrange items in your grid by assigning names to various elements of your layout.

The rules for grid-template-areas:

• Every cell of a grid needs to be filled.

• Repeat names to span across multiple cells.

• Use a period (.) to leave a cell empty.

• Areas must be rectangular (cannot have L-shaped areas).

• Areas cannot be repeated in different locations.

      <div class="grid layout">
        <div class="item1">ITEM 1</div>
        <div class="item2">ITEM 2</div>
        <div class="item3">ITEM 3</div>
        <div class="item4">ITEM 4</div>
      </div>

.grid{
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3,1fr);
    grid-template-areas:
        "i1 i1 i2"
        "i1 i1 i2"
        "i3 i3 i3"
        "i4 i4 i4";
}

.item1{
    grid-area: i1;
}
.item2{
    grid-area: i2;
}

.item3{
    grid-area: i3;
}

.item4{
    grid-area: i4;
}

Syntax:

grid-template-areas: "a b";
grid-template-areas:
  "a b ."
  "a c d";

grid-area is used to name the element of grid which we want to place in the grid layout(Here, I have used i1, i2, i3, i4). After from this, grid-template-areas supports some global values like inherit, initial, revert, revert-layer, unset.

Alignment Properties:

CSS Grid has two axes—block (vertical) and inline (horizontal). The alignment properties allow you to align elements along these axes:

• align-items : aligns items on the block axis.

• justify-items : aligns items along the inline axis.

• align-content: aligns items along the block axis when there is extra space.

• justify-content : aligns items on the inline axis when there is extra space.

• align-self: Aligns an individual item on the block axis.

• justify-self: Aligns an individual item on the inline axis.

Conclusion:

This blog covers essential concepts related to CSS Grid Layout. After reading this blog, you should have a solid understanding of all necessary properties required to design web pages using CSS Grid Layout.

Points to remember:

• It is possible to nest a grid within another grid, by using grid-template-rows: subgrid or grid-template-columns: subgrid for the nested grid.

• Grid functionality is already included in the specification and is supported by most modern browsers.

Code:

You can use this code snippet to experiment with CSS Grid Layout:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="grid layout">
        <div >ITEM 1</div>
        <div >ITEM 2</div>
        <div >ITEM 3</div>
        <div >ITEM 4</div>
      </div>
    </div>
  </body>
</html>

*{
    margin: 0;
    padding: 0;
}

.container{
    width: 100vw;
    height: 100vh;
    background-color: rgb(233, 230, 225);
    padding: 2rem;
}

.grid{
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3,100px);
    grid-template-rows: repeat(3,1fr);
    grid-auto-flow: column;
}


.layout{
    width: 80vw;
    height: 80vh;
    background-color:gray;
    margin: auto ;
    padding: 1rem;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.layout>div{
    background-color: beige;
    text-align: center;
    box-sizing: border-box;
}

Thank you for your time! Please let me know if there are any opportunities for improvement in this blog or any additions I can make in the comment section.