CSS3 Topics

CSS Grid Layout

April 17, 2021

css grid


The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Grid Property ::

.grid-container {
  display: grid;
  display: inline-grid;
}

Grid Template Column ::

.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  column-gap: 50px;
  row-gap: 50px;
  gap: 50px 50px;
}



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

        <title>Document</title>
        <style>

            .section{
                display: inline-grid;
                grid-template-columns: 50px 50px 50px 50px;
                /* column-gap: 50px; */
                /* row-gap: 50px; */
                gap: 50px 50px;
                background-color: cyan;
            }

        </style>
    </head>
    <body>

        <div class="section">
            <button>One</button>
            <button>One</button>
            <button>One</button>
            <button>One</button>
            <button>One</button>
            <button>One</button>
        </div>
       
    </body>
    </html>
   


CSS Grid Properties

PropertyDescription
column-gapSpecifies the gap between the columns
gapA shorthand property for the row-gap and the column-gap properties
gridA shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-areaEither specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columnsSpecifies a default column size
grid-auto-flowSpecifies how auto-placed items are inserted in the grid
grid-auto-rowsSpecifies a default row size
grid-columnA shorthand property for the grid-column-start and the grid-column-end properties
grid-column-endSpecifies where to end the grid item
grid-column-gapSpecifies the size of the gap between columns
grid-column-startSpecifies where to start the grid item
grid-gapA shorthand property for the grid-row-gap and grid-column-gap properties
grid-rowA shorthand property for the grid-row-start and the grid-row-end properties
grid-row-endSpecifies where to end the grid item
grid-row-gapSpecifies the size of the gap between rows
grid-row-startSpecifies where to start the grid item
grid-templateA shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areasSpecifies how to display columns and rows, using named grid items
grid-template-columnsSpecifies the size of the columns, and how many columns in a grid layout
grid-template-rowsSpecifies the size of the rows in a grid layout
row-gapSpecifies the gap between the grid rows