Css

Css Grid

About CSS Grid

The CSS Grid Layout Module is a powerful tool for creating two-dimensional grid-based layouts in web development. It enables precise control over the arrangement of content in rows and columns, offering flexibility and ease of design. With its responsive capabilities, Grid Layout simplifies the creation of dynamic and adaptive layouts for diverse screen sizes.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.one { grid-area: header; }
.two { grid-area: menu1; }
.three { grid-area: menu2; }
.four { grid-area: Tleft; }
.five { grid-area: Tright; }
.six { grid-area: footer; }

.grid-container {
display: grid;
grid-template-areas:
'header header header header'
'menu1 Tleft Tright menu2'
'menu1 footer footer menu2';
gap: 5px;
background-color: green;
padding: 10px;
}

.grid-container > div {
background-color: lightpink;
color : white;
text-align: center;
padding: 10px 0;
font-size: 20px;
}
</style>
</head>
<body>

<h2>Grid Layout</h2>

<div class="grid-container">

<div class="one">Header</div>
<div class="two">Menu</div>
<div class="three">Main</div>
<div class="four">Right</div>
<div class="five">Footer</div>
<div class="six">Footer</div>

</div>

</body>
</html>

Display Property

The 'display' property in CSS is used to define the layout behavior of an HTML element. In the context of CSS Grid Layout, it is instrumental for creating grid-based structures. Here's a short description:

  1. display: grid;
    Defines the element as a grid container, establishing a two-dimensional grid context. The direct children become grid items, and the layout is controlled using grid-related properties like grid-template-columns and grid-template-rows.

    2. Example:-

    .grid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    }
  2. display: inline-grid;
    Similar to grid, but generates an inline-level grid container. It flows inline with surrounding content while maintaining grid layout characteristics.

    3. Example:-

    .inline-grid-container {
    display: inline-grid;
    grid-template-columns: 100px 100px 100px;
    }

Grid Gaps

In CSS Grid Layout, "grid gaps" refer to the spaces between rows and columns within a grid. These gaps can be defined using properties like 'grid-gap','grid-row-gap','grid-column-gap', or the shorthand 'gap'.

  • column-gap
  • row-gap
  • gap
  1. grid-gap:

    2. Example

    .grid-container {
    display: grid;
    grid-gap: 10px; /* Sets both row and column gaps to 10 pixels */
    }
  2. grid-row-gap and grid-column-gap:

    3. Example

    .grid-container {
    display: grid;
    grid-row-gap: 10px; /* Sets only the row gap to 10 pixels */
    grid-column-gap: 20px; /* Sets only the column gap to 20 pixels */
    }

Grid Container

In CSS, a "Grid Container" is an HTML element that has its layout defined as a grid using the display: grid property. This transformation enables the container to organize its child elements in a two-dimensional grid structure.

grid-template-columns

The grid-template-columns property in CSS is used within a grid container to define the size, distribution, and flexibility of its columns. It allows developers to specify the dimensions of the columns in the grid layout. Here's a brief overview:

Example

.grid-container {
display: grid;
grid-template-columns: value1 value2 value3 ...;
}

The .grid-container is a grid container with three columns defined by grid-template-columns: 100px 1fr 2fr;.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 1fr 2fr; /* Three columns with specified sizes */
grid-gap: 10px; /* Gap between grid items */
}

.grid-item {
background-color: #3498db;
color: #fff;
padding: 20px;
text-align: center;
}

</style>
</head>
<body>
<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> </head>
<body>
</html>
  • The first column has a fixed size of 100px.
  • The second column takes one fractional unit (1fr) of the available space.
  • The third column takes two fractional units (2fr) of the available space.

Example:-

If you make more column

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
}

CSS justify-content Property

The justify-content property in CSS is used to control the horizontal alignment of items within a flex container or grid container.

Example:-

Variable Declaration:

.grid-container {
display: grid;
justify-content: space-evenly;
}

justify-content: space-evenly;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: start;
justify-content: end;

CSS align-content Property

The align-content property in CSS is utilized within a flex container or grid container to control the vertical alignment of its children along the cross axis.

Example:-

.grid-container {
display: grid;
height: 400px; /* height is mandatory */
align-content: space-evenly;
}

align-content: space-evenly;
align-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: start;
justify-content: end;

CSS Grid Item

A CSS Grid Item is an HTML element that is a direct child of a grid container, defining the individual components within the grid layout.

grid-column Property:

The grid-column property in CSS is used to specify the starting and ending positions of a grid item within the columns of a grid container. It enables precise control over the horizontal placement and span of grid items in a grid layout.

Syntax:

.grid-item {
grid-column: <start-line> / <end-line>;
}

Values:

  • <start-line>: The line where the grid item starts.
  • <end-line>: The line where the grid item ends.
  • These lines can be specified using numerical indices, named lines, or the span keyword.

Example:-

.grid-item {
grid-column: 2 / span 3; /* Starts at the 2nd column and spans 3 columns */
}

grid-column Property

The grid-column property in CSS is used to specify the starting and ending positions of a grid item within the columns of a grid container.

It enables precise control over the horizontal placement and span of grid items in a grid layout.

Example:-

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
background-color: #2196F3;
padding: 10px;
gap: 10px;
}

.grid-container > div {
background-color: lightgreen;
text-align: center;
padding: 10px 0;
color : red;
font-size: 20px;
}

.one {
grid-column: 1 / 4;
<!-- (or) grid-column: 1 / span 3; -->
}

</style>
</head>
<body>
<h2>grid-column Property</h2>
<div class="grid-container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
<div class="seven">7</div>
<div class="eight">8</div>
<div class="nine">9</div>
<div class="ten">10</div>
</div>
</body>
</html>

grid-row Property:

The grid-row property in CSS is used within a grid item to specify its location and span along the rows of a grid container.

It defines both the starting and ending positions of the grid item within the grid container's row tracks.

This property allows for precise control over the vertical placement and extent of grid items in a grid layout.

Syntax:

.grid-item {
grid-row: <start-line> / <end-line>;
}

Example:-

.grid-item {
grid-row: 2 / span 3; /* Starts at the 2nd row and spans 3 row */
}

Example:-

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
background-color: #2196F3;
padding: 10px;
gap: 10px;
}

.grid-container > div {
background-color: lightgreen;
text-align: center;
padding: 10px 0;
color : red;
font-size: 20px;
}

.one {
grid-row: 1 / 3;
<!-- (or) grid-column: 1 / span 2; -->
}

</style>
</head>
<body>
<h2>grid-column Property</h2>
<div class="grid-container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
<div class="seven">7</div>
<div class="eight">8</div>
<div class="nine">9</div>
<div class="ten">10</div>
</div>
</body>
</html>

Grid-area Property

In CSS Grid, the grid-area property can be used as a shorthand property to set all the grid item placement properties in a single declaration. The full shorthand property

syntax is:

grid-area: row-start / column-start / row-end / column-end;

Here's a simple example:

.grid-item {
grid-area: 2 / 1 / 4 / 4;
}
  • row-start: The row line where the grid item starts.
  • column-start: The column line where the grid item starts.
  • row-end: The row line where the grid item ends.
  • column-end: The column line where the grid item ends.

Example:-

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: green;
padding: 10px;
}

.grid-container > div {
background-color: blue;
text-align: center;
color : yellow;
padding: 10px 0;
font-size: 20px;
}

.five {
grid-area: 2 / 2 / 4 / 4;
}

</style>
</head>
<body>
<h2>The grid-area Property</h2> <p>
grid-row-start
grid-column-start
grid-row-end
grid-column-end.
</p>
<div class="grid-container">
<div class="one">1>/div>
<div class="tow">2>/div>
<div class="three">3>/div>
<div class="four">4>/div>
<div class="five">5>/div>
<div class="six">6>/div>
<div class="siven">7>/div>
<div class="eight">8>/div>
<div class="nine">9>/div>
<div class="ten">10>/div>
<div class="leven">11>/div>
<div class="twelve">12>/div>

<</div>
</body>
</html>