CSS GRID SYSTEM IN HINDI / URDU With Projects (Free source Code )

AMAOS3 February 23, 2022

CSS GRID SYSTEM IN HINDI / URDU



Channel: Code With Harry

Must Read This Amazing Article

CSS GRID LAYOUTS:

CSS Grid Layouts Offers a grid layout system It Helps Us making rows and coloums Which helps to make web pages beautiful:

Grid Elements:

To Understanding Grid Elements See This Example with source code:
A Example of Grid Elements 

A Grid Layout must have a parent element with the display property set to grid or inline-grid.

Direct child element(s) of the grid container automatically becomes grid items.

SOURCE CODE STARTS HERE:

<!DOCTYPE html>

<html>

<head>

<style>

.grid-container {

  display: grid;

  grid-template-columns: auto auto auto;

  background-color: #2196F3;

  padding: 10px;

}

.grid-item {

  background-color: rgba(255, 255, 255, 0.8);

  border: 1px solid rgba(0, 0, 0, 0.8);

  padding: 20px;

  font-size: 30px;

  text-align: center;

}

</style>

</head>

<body>


<h1>Grid Elements</h1>


<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>


<p>Direct child element(s) of the grid container automatically becomes grid items.</p>


<div class="grid-container">

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

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

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

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

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

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

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

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

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

</div>


</body>

</html>

PROJECT:

1
2
3
4
5
6
7
8
9

After Watching the Video of Harry Makes this Project:

Practice for GRID LAYOUT:

Thanks For Reading The Article
Team: amaos3

Other Useful articles:
HTML CSS Search Box
Take HTML Test To Check You Skills Click Here To Start



Tags:

Post a Comment

0 Comments