Grid in CSS

By /

CSS Grid Layout

The CSS Grid Layout should be used for two-dimensional layout, with rows AND columns.

Linkedin Github

The CSS Grid Layout should be used for two-dimensional layout, with rows AND columns.

Linkedin Github

HTML

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>Grid Layout CSS</title>
    <link rel=”stylesheet” href=”style.css” />
  </head>
  <body>
    <h1>Grid Playground</h1>
    <hr />
    <div class=”container”>
      <div class=”item”>1</div>
      <div class=”item”>2</div>
      <div class=”item”>3</div>
      <div class=”item”>4</div>
      <div class=”item”>5</div>
    </div>
  </body>
</html>

CSS

.container{
    width: 600px;
    height: 300px;
    background-color:black;
}
.item{
    width:100px;
    height: 50px;
    border: 2px solid black;
    background-color: aquamarine;
    text-align: center;
}

OUTPUT

Use display:grid | grid-template-rows:|grid-template-columns:

HTML

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>Grid Layout CSS</title>
    <link rel=”stylesheet” href=”style.css” />
  </head>
  <body>
    <h1>Grid Playground</h1>
    <hr />
    <div class=”container”>
      <div class=”item”>1</div>
      <div class=”item”>2</div>
      <div class=”item”>3</div>
      <div class=”item”>4</div>
      <div class=”item”>5</div>
    </div>
  </body>
</html>

CSS

.container{
    width: 600px;
    height: 300px;
    background-color:black;
    display: grid;
    grid-template-rows: 50px 50px 50px 50px 50px;
    grid-template-columns: 100px 100px 100px;
}
.item{
    width:100px;
    height: 50px;
    border: 2px solid black;
    background-color: aquamarine;
    text-align: center;

 

}

OUTPUT

Item Space Divide Equally
grid-template-rows:50px 50px 50px 50px 50px

grid-template-columns:100px 100px 100px

Use display:grid |grid-template-columns: auto

HTML

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>Grid Layout CSS</title>
    <link rel=”stylesheet” href=”style.css” />
  </head>
  <body>
    <h1>Grid Playground</h1>
    <hr />
    <div class=”container”>
      <div class=”item”>1</div>
      <div class=”item”>2</div>
      <div class=”item”>3</div>
      <div class=”item”>4</div>
      <div class=”item”>5</div>
    </div>
  </body>
</html>

CSS

.container{
    width: 600px;
    height: 300px;
    background-color:black;
    display: grid;
    grid-template-rows: 50px 50px 50px 50px 50px;
     grid-template-columns: auto auto auto;
}
.item{
    width:100px;
    height: 50px;
    border: 2px solid black;
    background-color: aquamarine;
    text-align: center;
}

OUTPUT

using auto column Space Divide Equally

auto means not actually divide space equally , space division is depend on item contents.

grid-template-rows: repeat(count,1fr) |grid-template-columns: repeat (count,1fr)

HTML

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>Grid Layout CSS</title>
    <link rel=”stylesheet” href=”style.css” />
  </head>
  <body>
    <h1>Grid Playground</h1>
    <hr />
    <div class=”container”>
      <div class=”item”>1</div>
      <div class=”item”>2</div>
      <div class=”item”>3</div>
      <div class=”item”>4</div>
      <div class=”item”>5</div>
    </div>
  </body>
</html>

CSS

.container{
    width: 600px;
    height: 300px;
    background-color: black;
    display: grid;
    grid-template-rows: 50px 50px 50px 50px 50px;
       grid-template-rows: repeat(5,1fr);
     grid-template-columns: repeat(3,1fr);
}
.item{
    /* width:100px;
    height: 50px; */
    border: 2px solid black;
    background-color: aquamarine;
    text-align: center;
}

OUTPUT

Available Space Divide Equally
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;

row-gap: |column-gap: |grid-gap

HTML

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>Grid Layout CSS</title>
    <link rel=”stylesheet” href=”style.css” />
  </head>
  <body>
    <h1>Grid Playground</h1>
    <hr />
    <div class=”container”>
      <div class=”item”>1</div>
      <div class=”item”>2</div>
      <div class=”item”>3</div>
      <div class=”item”>4</div>
      <div class=”item”>5</div>
    </div>
  </body>
</html>

CSS

    .container{
        width: 600px;
        height: 300px;
        background-color:black;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: repeat(5,1fr);
        row-gap: 10px;
        column-gap: 20px;
        /* grid-gap: 10px 20px; */
    }
    .item{
        width:100px;
        height: 50px;
        border: 2px solid black;
        background-color: aquamarine;
        text-align: center;
    }

OUTPUT

Available Space Divide Equally
grid-gap:10px 20px;

Grid Columns| Grid Rows

HTML

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>Grid Layout CSS</title>
    <link rel=”stylesheet” href=”style.css” />
  </head>
  <body>
    <h1>Grid Playground</h1>
    <hr />
    <div class=”container”>
      <div class=”item one”>1</div>
      <div class=”item two”>2</div>
      <div class=”item”>3</div>
      <div class=”item”>4</div>
      <div class=”item”>5</div>
    </div>
  </body>
</html>

CSS

    .container{
        width: 600px;
        height: 300px;
        background-color:black;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: repeat(5,1fr);
        row-gap: 10px;
        column-gap: 20px;
        grid-gap: 10px 20px;
    }
    .item{
        /* width:100px;
        height: 50px; */
        border: 2px solid black;
        background-color: aquamarine;
        text-align: center;
    }
    .one{
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .two{
        grid-row-start:1;
        grid-row-end:3;
    }

OUTPUT

grid-row
grid-row:1/3;
grid-row:1/span 4;

Grid Comman Properties

Leave a Comment

Your email address will not be published. Required fields are marked *

Day Tag Line

“Where Logic Meets Creativity.”

Connect with me

+919518528635

sakhare.rohini298@gmail.com

FOLLOW Me
Linkedin Github

© 2025 https://rsportfolio.com/

Scroll to Top