What is Css grid , what are the properties of Css grid ?

 CSS GRID

CSS Grid is a layout system that allows you to create responsive and flexible web    pages using rows and columns. It is supported by modern web browsers and offers many features like grid-template-areas, grid alignment and many more. You can use properties like grid-template-rows, grid-template-columns, display-grid to define a grid container and its child elements.

                For more clarification, Let us understand from Figure


                                                   Fig: Grid Container



Example:

HTML

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
CSS
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
Properties of CSS Grid:
CSS grid properties are the properties that control the layout of elements in a grid container. They can be divided into two categories: properties for the grid container and properties for the grid items. Some of the most common CSS grid properties are:
Display-grid:
The display-grid property is a shorthand for setting all of the following properties in a single declaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow. It sets whether an element is treated as a grid container and establishes a new grid formatting context for its contents. The direct children of the container become grid items that can be laid out in rows and columns.
grid-template-rows and grid-template-columns:
The display-grid property is a shorthand for setting all of the following properties in a single declaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow. It sets whether an element is treated as a grid container and establishes a new grid formatting context for its contents. The direct children of the container become grid items that can be laid out in rows and columns
  • grid-template-areas: specify the grid layout using named items.
  • grid-auto-columns and grid-auto-rows: specify the size of implicitly generated grid tracks.
  • grid-auto-flow: control how auto-placed items are flowed into the grid.
  • gap: set the size of the gaps (gutters) between rows and columns.
  • grid-column-start, grid-column-end, grid-row-start, and grid-row-end: determine a grid item’s location within the grid by referring to specific grid lines.
  • grid-column, grid-row, and grid-area: are shorthand properties for the grid-placement properties.

Let see practical example:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .gridcon{
            height: 100vh;
            width: 100vw;
            background-color: red;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: repeat(3,1fr);
        }
        #item{ background-color: aquamarine; border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="gridcon">
        <div id="item"></div>
        <div id="item"></div>
        <div id="item"></div>
        <div id="item"></div>
        <div id="item"></div>
        <div id="item"></div>
        <div id="item"></div>
        <div id="item"></div>
        <div id="item"></div>
    </div>
</body>
</html>
Output









THANKS FOR READING THIS CONTENT.

HOPE YOU WILL FIND IT HELPFUL

For more email me on:
shreesantadhikari4590@gmail.com

Comments

Post a Comment