CSS Grid

 

The Grid Layout is a powerful CSS layout system that allows you to create complex and responsive grid-based layouts in a straightforward way. Unlike Flexbox, which is primarily one-dimensional (laying out items in a row or a column), the Grid Layout is two-dimensional, meaning you can control both rows and columns simultaneously.

Key Concepts of Grid Layout

1.      Grid Container: The element on which display: grid is applied becomes a grid container. This container defines a grid context for its children.

2.      Grid Items: The direct children of a grid container are grid items. These items are placed into the defined grid structure.

3.      Grid Lines: The dividing lines that separate the grid into rows and columns. These can be referenced by number or name to place items precisely.

4.      Grid Tracks: The rows and columns themselves. You define grid tracks using the grid-template-rows and grid-template-columns properties.

5.      Grid Cells: The individual spaces created by the intersection of a row and a column.

6.      Grid Areas: A rectangular space made up of one or more grid cells, defined by naming areas in the grid.

 

 

 

CSS Grid Layout comes with a variety of properties that allow you to define and manipulate grid containers, grid items, and their behavior within the grid. Here’s a breakdown of the key properties: 

1. Grid Container Properties

These properties are applied to the parent element, which becomes the grid container.

  • display: grid; or display: inline-grid; 
    Turns an element into a grid container, creating a grid formatting context for its children.


     

     

  • grid-template-columns
    Defines the number and size of the columns in the grid. For example, 

    grid-template-columns:     100px 1fr;

    creates two columns, where the first is 100px wide and the     second takes up the remaining space.


     

     

  • grid-template-rows
    Defines the number and size of the rows in the grid. For example,

     

    grid-template-rows: auto 1fr auto;

    creates three rows, where the middle row takes up the remaining space. 



     

  • grid-template-areas
    Defines named grid areas, allowing you to lay out grid items using these names. For example,

    grid-template-areas:       “header header”  
                                          “sidebar main”   
                                          “footer footer”;



  • grid-template
    Shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas. For example,

    grid-template: auto 100px auto / 1fr 2fr 1fr;

    auto 100px auto: Defines three rows where the first and third rows adjust to their content, and the second row is fixed at 100px.1fr 2fr 1fr: Defines three columns where the middle column is twice as wide as the others.


     

     

  • gap, grid-gap, row-gap, column-gap, grid-row-gap, grid-column-gap
    Specifies the space between grid items. grid-gap is shorthand for both grid-row-gap and grid-column-gap. For example,

    gap: 10px 15px;

    create a gap of 10px grid-row-gap and 15px grid-column-gap



  • justify-items
    Aligns grid items horizontally within their grid cells. Values include start, end, center, and stretch. For example, 

    justify-items: center;

    centers all grid items horizontally within their grid cells.
  •  
css-grid-justify-items

 

  • align-items
    Aligns grid items vertically within their grid cells. Values include start, end, center, and stretch. For example, 

    align-items: center;

    vertically centers all grid items
css-grid-align-items
 
  • place-items
    place-items sets both the align-items and justify-items properties in a single declaration. It takes the value align-items and justify-items. If the second value is omitted, the first value is assigned to both properties. For example, 

    place-items: center;

    centers grid items both horizontally and vertically within their grid cells.




  • justify-content

    Aligns the grid as a whole within the grid container. It controls the space between columns. Values include start, end, center, space-between, space-around, and space-evenly. For example,

     

    justify-content: space-between;

     

     

    evenly distributes the grid columns horizontally with space between them.

     

     

css-grid-justify-content
 
  • align-content
    Aligns the grid as a whole within the grid container. It controls the space between rows. Values include start, end, center, space-between, space-around, and space-evenly. For example,

    align-content: space-around;
    evenly distributes space around rows


css-grid-align-content
 
  • grid-auto-rows, grid-auto-columns
    Defines the size of implicitly created grid rows or columns when you place items outside the explicit grid. For example,

    grid-auto-rows: 100px;

    sets the height of implicitly created rows to 100px


    grid-auto-columns: 200px;

    sets the width of implicitly created columns to 200px.



  • grid-auto-flow
    Controls the placement of items that are not explicitly placed using grid lines or areas. Values include row, column, dense, and row dense. For example,

    grid-auto-flow: column;

    arranges grid items by filling columns first, rather than rows.



  • grid
    Shorthand for setting all of the following: grid-template-rows, grid-template-columns, grid-template areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow. For example,

    grid: auto 100px auto / 1fr 2fr 1fr;

    sets row heights to auto, 100px, and auto, and column widths to 1fr, 2fr, and 1fr.



2. Grid Item Properties

These properties are applied to the children (grid items) of the grid container.

  • grid-column-start, grid-column-end
    Specifies where a grid item starts and ends on the column axis. For example,

    grid-column-start: 2;
    grid-column-end: 4;

    This positions the grid item to start at the second column line and end at the fourth column line, spanning two columns.


  • grid-row-start, grid-row-end
    Specifies where a grid item starts and ends on the row axis. For example, 

    grid-row-start: 1;
    grid-row-end: 3;

    This places the grid item starting at the first row line and ending at the third row line, spanning two rows.



  • grid-column
    Shorthand for grid-column-start and grid-column-end. For example,


    grid-column: 1 / span 2;

    makes the item start at the first column line and span two columns.



  • grid-row
    Shorthand for grid-row-start and grid-row-end. For example,


    grid-row: 1 /span 3;

    makes the item start at the first row line and span three rows.



  • grid-area
    Allows you to position a grid item in a named grid area. Alternatively, it can be shorthand for specifying row and column start and end lines. For example,


    grid-area: header;     or     grid-area: 1 / 1 / 2 / 3;



  • justify-self

    Aligns a grid item horizontally within its grid cell. This overrides justify-items for that particular item.


 
  • align-self
    Aligns a grid item vertically within its grid cell. This overrides align-items for that particular item.


 
  • place-self
    sets both the align-self and justify-self properties in a single declaration. It takes following value

    auto – The “default” alignment for the layout mode.
    <align-self> / <justify-self> – The first value sets align-self, the second value justify-self. If the second value is omitted, the first value is assigned to both properties.

    place-self: center stretch;

     

    centers an item horizontally within its grid cell and stretches it vertically to fill the cell.



3. Additional Concepts

  • fr Unit
    The fr unit represents a fraction of the available space in the grid container. For example, grid-template-columns: 1fr 2fr; means the second column will be twice as wide as the first.

     

     

  • minmax()
    Defines a size range greater than or equal to min and less than or equal to max. For example, grid-template-columns: minmax(100px, 1fr); means the column will be at least 100px wide but can grow to fill the remaining space.

     

     

  • repeat()
    Simplifies the definition of repeated columns or rows. For example, grid-template-columns:
    repeat(3, 1fr); creates three columns, each taking up one fraction of the
    space.

 

These properties collectively give you the flexibility to create complex and responsive grid-based layouts with precision and control column

Scroll to Top