start learning
Image 1

CSS Grid Layout

CSS Grid is a powerful layout module in CSS that allows you to create grid-based layouts for web pages. It introduces a two-dimensional grid system that enables precise control over the positioning and alignment of elements within a container.

Key features and concepts of CSS Grid include:

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.


Basic Grid Container and Items

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


<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>

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

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

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Grid Areas and Placement

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


<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>

  /* 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;
  }

Preview :
Header
Sidebar
Content
Footer

Grid Tracks and Grid Lines

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


<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>

.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;
  }

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.

Preview :
Item 1
Item 2
Item 3
Item 4

Grid Template Areas and Grid Line-Based Placement

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


<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>

.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;
  }

Preview :
Header
Sidebar
Content
Footer

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.


Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor