Welcome to CSS Grid Generator

you can set the pixel your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid. Though this project can get a basic layout started for you. It is a way for you to use CSS Grid features quickly.

About us

Control panel

Column Icon

Column

Raw Icon

Row

Grid Column Gap Icon

Grid Column Gap

Grid Column Gap Icon

Grid Raw Gap

CSS HTML

Class Name

Some Predefined Layout

Just click copy button and copy current layout

Basic Web Layout

Basic Web Layout

View

Basic Web Layout

  • HTML
  • CSS
  • DEMO

HTML

Copy HTML



<div class="grid-container">
    <div class="Header"></div>
    <div class="Sidebar"></div>
    <div class="Main"></div>
    <div class="Footer"></div>
</div>

CSS

Copy CSS


.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px 10px;
    background-color: #EDF2F4;
    grid-template-areas:
        "Header Header Header Header Header Header Header Header Header"
        "Header Header Header Header Header Header Header Header Header"
        "Sidebar Sidebar Main Main Main Main Main Main Main"
        "Sidebar Sidebar Main Main Main Main Main Main Main"
        "Sidebar Sidebar Main Main Main Main Main Main Main"
        "Sidebar Sidebar Main Main Main Main Main Main Main"
        "Sidebar Sidebar Main Main Main Main Main Main Main"
        "Sidebar Sidebar Main Main Main Main Main Main Main"
        "Sidebar Sidebar Main Main Main Main Main Main Main"
        "Footer Footer Footer Footer Footer Footer Footer Footer Footer"
        "Footer Footer Footer Footer Footer Footer Footer Footer Footer";
    }
    
    .Header { grid-area: Header; background-color: #D90429; border-radius: 10px;}
    .Sidebar { grid-area: Sidebar; background-color: #D90429; border-radius: 10px;}
    .Footer { grid-area: Footer; background-color: #D90429; border-radius: 10px;}
    .Main { grid-area: Main; background-color: #D90429; border-radius: 10px;}

DEMO

Codepen
Two Sidebar Web Layout

Two Sidebar Web Layout

View

Two Sidebar Web Layout

  • HTML
  • CSS
  • DEMO

HTML

Copy HTML



<div class="grid-container">
    <div class="Header"></div>
    <div class="Sidebar1"></div>
    <div class="Sidebar2"></div>
    <div class="Main"></div>
    <div class="Footer"></div>
</div>

CSS

Copy CSS


.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px 10px;
    background-color: #EDF2F4;
    grid-template-areas:
        "Header Header Header Header Header Header"
        "Sidebar1 Main Main Main Main Sidebar2"
        "Sidebar1 Main Main Main Main Sidebar2"
        "Sidebar1 Main Main Main Main Sidebar2"
        "Sidebar1 Main Main Main Main Sidebar2"
        "Sidebar1 Main Main Main Main Sidebar2"
        "Sidebar1 Main Main Main Main Sidebar2"
        "Footer Footer Footer Footer Footer Footer";
    }
    
    .Header { grid-area: Header; background-color: #D90429; border-radius: 10px;}
    .Sidebar1 { grid-area: Sidebar1; background-color: #D90429; border-radius: 10px;}
    .Sidebar2 { grid-area: Sidebar2; background-color: #D90429; border-radius: 10px;}
    .Main { grid-area: Main; background-color: #D90429; border-radius: 10px;}
    .Footer { grid-area: Footer; background-color: #D90429; border-radius: 10px;}

DEMO

Codepen
Grid Gallery Layout

Grid Gallery Layout

View

Grid Gallery Layout

  • HTML
  • CSS
  • DEMO

HTML

Copy HTML



<div class="grid-container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
</div>

CSS

Copy CSS


.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
gap: 10px 10px;
background-color: #EDF2F4;
grid-template-areas:
    "box1 box1 box1 box1"
    "box2 box4 box4 box3"
    "box2 box5 box5 box3"
    "box2 box6 box6 box6"
    "box2 box7 box8 box8";
}

.box1 { grid-area: box1; background-color: #D90429; border-radius: 10px;}
.box2 { grid-area: box2; background-color: #D90429; border-radius: 10px;}
.box3 { grid-area: box3; background-color: #D90429; border-radius: 10px;}
.box4 { grid-area: box4; background-color: #D90429; border-radius: 10px;}
.box5 { grid-area: box5; background-color: #D90429; border-radius: 10px;}
.box6 { grid-area: box6; background-color: #D90429; border-radius: 10px;}
.box7 { grid-area: box7; background-color: #D90429; border-radius: 10px;}
.box8 { grid-area: box8; background-color: #D90429; border-radius: 10px;}

DEMO

Codepen

Click to Copy 

.fancybox-content{
    border-radius: 20px;
    background-color: $base;
    cursor: default !important;
}

HTML

Click to Copy