CSS Grid Layout

Key features and concepts of CSS Grid include:

• Grid Container : The parent element that contains grid items. It is defined by setting the display property to grid.
• Grid Items : The child elements within the grid container. They are positioned and arranged within the grid cells.
• Grid Tracks : The rows and columns of the grid. You can define the size of each track explicitly or allow them to automatically adjust based on content or available space.
• Grid Lines : The horizontal and vertical lines that define the boundaries of the grid cells.
• Grid Template Columns and Rows : Properties that specify the size and structure of the grid tracks. You can use fixed values, percentages, or flexible units like fr (fraction of available space) to define the width or height of each track.
• Grid Gap : The space between grid cells. You can define separate gaps for rows (row-gap) and columns (column-gap).
• Grid Areas : Named grid areas that can span across multiple cells. This allows you to create complex layouts with specific placement and overlapping elements.
• Grid Line-based Placement : You can position grid items by specifying the starting and ending grid lines they occupy.

CSS Flexbox simplifies the creation of responsive layouts by automatically handling element positioning, distribution, and alignment. It provides a flexible and intuitive approach to building dynamic and adaptable web designs without relying heavily on manual calculations and complex CSS rules.

First Step bevore starting : You can freely copy the code or you can use our free live html editor to test the code

Edit Copy Hide

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

Edit Copy Hide

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

  .grid-item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
  }

• The .grid-container class is defined with display: grid, making it a grid container.
• grid-template-columns : 1fr 1fr 1fr specifies that the grid container should have three equally sized columns.
• grid-gap : 10px creates a 10-pixel gap between grid items.
• Inside the container, six .grid-item divs are created, each representing a grid item.
• The background color, padding, and text alignment properties are applied to the grid items for visual styling.

First step bevore starting: You can freely copy the code or you can use our free live html editor to test the code

Edit Copy Hide

<div class="grid-container">
  <div class="grid-item header">Header</div>
  <div class="grid-item sidebar">Sidebar</div>
  <div class="grid-item content">Content</div>
  <div class="grid-item footer">Footer</div>
</div>

Edit Copy Hide

  /* Define a CSS class for the grid container */
  .grid-container {
    /* Use the grid display property to create a grid container */
    display: grid;

    /* Define the number of columns and their width in the grid */
    grid-template-columns: 1fr 1fr;

    /* Define the number of rows and their height in the grid */
    grid-template-rows: 200px 200px;

    /* Define the gap (spacing) between grid items */
    grid-gap: 10px;

    /* Define the layout of the grid areas using grid-template-areas */
    grid-template-areas:
      "header header"   /* Header area spanning two columns */
      "sidebar content" /* Sidebar and content areas side by side */
      "footer footer";  /* Footer area spanning two columns */
  }

  .grid-item {
    /* Add padding and center-align the text within grid items */
    padding: 20px;
    text-align: center;
  }

  .header {
    /* Set the background color of the header area */
    background-color: lightblue;

    /* Assign the header area to the 'header' grid area */
    grid-area: header;
  }

  .sidebar {
    /* Set the background color of the sidebar area */
    background-color: lightgreen;

    /* Assign the sidebar area to the 'sidebar' grid area */
    grid-area: sidebar;
  }

  .content {
    /* Set the background color of the content area */
    background-color: lightyellow;

    /* Assign the content area to the 'content' grid area */
    grid-area: content;
  }

  .footer {
    /* Set the background color of the footer area */
    background-color: lightpink;

    /* Assign the footer area to the 'footer' grid area */
    grid-area: footer;
  }

• In this example, the grid container is set to have two columns and three rows with specific heights.
• grid-template-areas defines the grid areas for each item by specifying their placement within the grid.
• Four divs with corresponding classes are created as grid items.
• Each grid item is assigned a specific grid area using the grid-area property.
• Background colors are applied to each grid item to differentiate them visually.

First step :You can freely copy the code or you can use our free live html editor to test the code

Edit Copy Hide

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

Edit Copy Hide

.grid-container {
    display: grid;
    grid-template-columns: 100px 1fr 200px;
    grid-template-rows: 50px 150px;
    grid-gap: 10px;
  }

  .grid-item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
  }

• The .grid-container class is defined as a grid container using display: grid.
• grid-template-columns : 100px 1fr 200px specifies three grid columns: a fixed 100-pixel column, a flexible column that takes the remaining space (1fr), and another fixed 200-pixel column.
• grid-template-rows : 50px 150px sets two grid rows: a fixed 50-pixel row and a fixed 150-pixel row.
• grid-gap : 10px creates a 10-pixel gap between grid items.
• The grid container contains four .grid-item divs, each representing a grid item.
• The background color, padding, and text alignment properties are applied to the grid items for visual styling.

These examples illustrate the basic usage of CSS Flexbox to create flexible and responsive layouts. Remember that Flexbox provides a wide range of properties and options for more advanced layouts and customization.

You can freely copy the code or you can use our free live HTML editor to modify the code according to your specific needs.

Edit Copy Hide

<div class="grid-container">
  <div class="grid-item header">Header</div>
  <div class="grid-item sidebar">Sidebar</div>
  <div class="grid-item content">Content</div>
  <div class="grid-item footer">Footer</div>
</div>

Edit Copy Hide

.grid-container {
    /* Define a CSS class for the grid container */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 1fr 200px;
    grid-gap: 10px;
    grid-template-areas:
      "header header header"
      "sidebar content content"
      "sidebar footer footer";
  }

  .grid-item {
    /* Define a CSS class for grid items */
    padding: 20px;
    text-align: center;
  }

  .header {
    /* Define a CSS class for the header area */
    background-color: lightblue;
    grid-area: header;
  }

  .sidebar {
    /* Define a CSS class for the sidebar area */
    background-color: lightgreen;
    grid-area: sidebar;
  }

  .content {
    /* Define a CSS class for the content area */
    background-color: lightyellow;
    grid-area: content;
  }

  .footer {
    /* Define a CSS class for the footer area */
    background-color: lightpink;
    grid-area: footer;
  }

• The grid container is set to have three equal-sized columns using grid-template-columns: repeat(3, 1fr).
• grid-template-rows : 100px 1fr 200px defines three rows: a fixed 100-pixel row, a flexible row that takes the remaining space (1fr), and a fixed 200-pixel row.
• grid-template-areas specifies the grid areas for each item by arranging them in a grid-like structure.
• The four divs with respective classes are created as grid items.
• Each grid item is assigned a specific grid area using the grid-area property, which matches the names specified in grid-template-areas.

These examples demonstrate the basic usage of CSS Grid to create grid-based layouts. Remember that CSS Grid offers a wide range of properties and options for more advanced grid configurations and responsive designs.