<![CDATA[CSS flex&gird layout]]>https://css-flexandgird-layout.hashnode.devRSS for NodeTue, 01 Sep 2026 16:50:33 GMT60<![CDATA[CSS Grid and flex box]]>https://css-flexandgird-layout.hashnode.dev/css-grid-and-flex-boxhttps://css-flexandgird-layout.hashnode.dev/css-grid-and-flex-boxMon, 05 May 2025 11:55:37 GMTCSS Grid arranges items in rows and columns (2-Dimension), while Flexbox aligns items in a single row or column (1-Dimension).

CSS Grid Layout

CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns. It makes easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows.

To get started, you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .main{
            display: grid; 
            grid: auto auto / auto auto auto auto; 
            grid-gap: 10px; 
            background-color: green; 
            padding: 10px; 
        }
        .gfg { 
            background-color: rgb(255, 255, 255); 
            text-align: center; 
            padding: 25px 0; 
            font-size: 30px; 
        } 
    </style>
</head>

<body>
    <h2 style="text-align: center;">
          Welcome To GeeksForGeeks
      </h2>
    <div class="main">
        <div class="gfg">Home</div>
        <div class="gfg">Read</div>
        <div class="gfg">Write</div>
        <div class="gfg">About Us</div>
        <div class="gfg">Contact Us</div>
        <div class="gfg">Privacy Policy</div>
    </div>
</body>

</html>

Output

CSS grid Property

It is a CSS property that offers a grid-based layout system, with rows and columns, making it easier to design web pages without floats and positioning.

Syntax :

Property values:

ValueDescription
noneIt is default value no specific size mentioned for row and column.
grid-template-rows / grid-template-columnsIt is used to specifies the size of rows and columns.
grid-template-areasIt is used to specifies the grid layout using named items.
grid-template-rows / grid-auto-columnsIt is used to specifies the auto size(height) and sets the auto size columns.
grid-auto-rows / grid-template-columnsIt is used to specifies the auto size and sets the auto grid size columns.
grid-template-rows / grid-auto-flow grid-auto-columnsIt is used to specifies how to place items and auto size row and columns.
grid-auto-flow grid-auto-rows / grid-template-columnsIt is used to specifies how to place items and auto size row and grid-template columns.

Example 1: Grid with 2-rows and 4-column. 

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        CSS | grid Property 
    </title> 
    <style> 
        .main { 
            display: grid; 
            grid: auto auto / auto auto auto auto; 
            grid-gap: 10px; 
            background-color: green; 
            padding: 10px; 
        } 

        .gfg { 
            background-color: lightgrey; 
            text-align: center; 
            padding: 25px 0; 
            font-size: 30px; 
        } 
    </style> 
</head> 

<body> 

    <h1>Welcome to GFG </h1> 
    <h3>This tutorial is on CSS grid property</h3> 

    <div class="main"> 
        <div class="gfg">1</div> 
        <div class="gfg">2</div> 
        <div class="gfg">3</div> 
        <div class="gfg">4</div> 
        <div class="gfg">5</div> 
        <div class="gfg">6</div> 
        <div class="gfg">7</div> 
        <div class="gfg">8</div> 
    </div> 

</body> 

</html>

Output :

This can be used as a shorthand property for :

  • grid-template-rows : Specifies the size of the rows.

  • grid-template-columns : This specifies the size of the columns.

  • grid-template-areas : This specifies the grid layout using named items.

  • grid-auto-rows : This specifies the auto size of the rows.

  • grid-auto-columns : This specifies the auto size of the columns.

  • grid-auto-flow : This specifies how to place auto-placed items, and the auto size of the row.

Example 2: This is example for the grid-template-rows and grid-template-columns. 

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        CSS | grid Property 
    </title> 
    <style> 
        .main { 
            display: grid; 
            grid-template-columns: 156px 156px 156px 156px; 
            grid-template-rows: 100px 200px; 
            grid-gap: 5px; 
            background-color: green; 
            padding: 5px; 
        } 

        .gfg { 
            background-color: lightgrey; 
            text-align: center; 
            padding: 20px 0; 
            font-size: 30px; 
        } 
    </style> 
</head> 

<body> 
    <h1>Welcome to GFG </h1> 
    <h3>This tutorial is on CSS grid property</h3> 

    <div class="main"> 
        <div class="gfg">1</div> 
        <div class="gfg">2</div> 
        <div class="gfg">3</div> 
        <div class="gfg">4</div> 
        <div class="gfg">5</div> 
        <div class="gfg">6</div> 
        <div class="gfg">7</div> 
        <div class="gfg">8</div> 
    </div> 

</body> 

</html>

Output : Height of the first row is set to 100px and height of the second row is set to 200px and width of every column is set to 156px.

CSS Flexbox

The CSS Flexbox offers one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes. To get started you have to define a container element as a grid with display: flex;

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .main{
            display: flex; 
            grid: auto auto / auto auto auto auto; 
            grid-gap: 10px; 
            background-color: green; 
            padding: 10px; 
        }
        .gfg { 
            background-color: rgb(255, 255, 255); 
            text-align: center; 
            padding: 25px 0; 
            font-size: 30px; 
        } 
    </style>
</head>

<body>
    <h2 style="text-align: center;">
          Welcome To GeeksForGeeks
      </h2>
    <div class="main">
        <div class="gfg">Home</div>
        <div class="gfg">Read</div>
        <div class="gfg">Write</div>
        <div class="gfg">About Us</div>
        <div class="gfg">Contact Us</div>
        <div class="gfg">Privacy Policy</div>
    </div>
</body>

</html>

Output

Difference Between CSS Grid and Flexbox

PropertyGridFlexbox
DimensionTwo – DimensionalOne – Dimensional
FeaturesCan flex combination of items through space-occupying FeaturesCan push content element to extreme alignment
Support TypeLayout FirstContent First
Primary Use CaseCreating complex layouts with rows and columnsAligning items in a row or column
PerformanceCan be less in performance due to very complex gridsGenerally faster for simple layouts

CSS Flexbox, short for the Flexible Box Layout module, is a powerful layout tool designed to simplify web page layouts by arranging items in rows or columns with ease.

  • Flexbox eliminates the need for floats or complex positioning, enabling responsive and dynamic layouts.

  • It aligns items efficiently, distributing space within a container, even when their sizes are dynamic or unknown.

  • Flexbox is supported in all modern browsers, making it a reliable choice for creating flexible designs.

What is CSS Flexbox?

The Flexible Box Layout module introduces a one-dimensional layout system that handles space distribution and item alignment effectively. It works seamlessly for horizontal (row) or vertical (column) arrangements, making it a go-to solution for responsive designs.

Key Features of CSS Flexbox

  • Alignment: Easily aligns items along the main axis (row/column) or cross-axis (perpendicular direction).

  • Space Distribution: Distributes space among items or gaps dynamically within a container.

  • Responsive Design: Adapts to screen sizes without extra effort, perfect for modern web layouts.

]]>