Grid It!

CSS Grid System Generator

Grid Columns

Grid Rows

Grid Gap Column

Grid Gap Row

1
2
3
4

Grid Items


**Please Fill In All The Inputs Fields.
  1. /
    /
  2. /
    /
  3. /
    /
  4. /
    /
Made With Love By ..

Ahmed Mukahal
Raad Hasan

CSS


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



.grid-container > grid-item:nth-child() {
    grid-column: /;
    grid-row: /;
}


.grid-container > grid-item:nth-child() {
    grid-column: /;
    grid-row: /;
}


.grid-container > grid-item:nth-child() {
    grid-column: /;
    grid-row: /;
}


.grid-container > grid-item:nth-child() {
    grid-column: /;
    grid-row: /;
}

HTML


<div class="grid-container">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>