Scribd
Upload
4 views

CSS Grid PART 1 Grid Container Properties 1691644210

Uploaded by

Ganeshpandi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

CSS Grid PART 1 Grid Container Properties 1691644210

Uploaded by

Ganeshpandi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

PART - 2

Follow @PriteshKiri
1

CSS Grid

Follow @PriteshKiri
2

CSS Grid

The CSS Grid offers a grid-based layout system, with rows


and columns, making it easier to design web pages

1. Grid Terminologies

2. Grid Containers (parents)

3. Grid Items (children)

In PART-1 of this Grid SERIES I have discussed about


flexbox terminologies and in this part we will be discussing
about Grid Container properties.

Follow @PriteshKiri
3

CSS Grid

Follow @PriteshKiri
4

CSS Grid

Follow @PriteshKiri
5

CSS Grid

Follow @PriteshKiri
6
CSS Grid Guide

Grid Container Properties OUTPUT

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 30% 30% 40%;
}

.grid-container {
display: grid;
grid: 100px 150px 100px / auto auto auto;

Follow @PriteshKiri
7

CSS Grid

Follow @PriteshKiri
8
CSS Grid Guide

Grid Container Properties OUTPUT

<!-- CSS --> <!-- HTML -->

.flex-container { <div class="grid-container">


<h3 class="gitem">1</h3>
display: grid;
<h3>2</h3>
grid-template-areas: ". . coffee coffee .";
<h3>3</h3>
}
<h3>4</h3>
<h3>5</h3>
.gitem { <h3>6</h3>
grid-area: coffee; <h3>7</h3>
} <h3>8</h3>
<h3>9</h3>
</div>

Follow @PriteshKiri
Follow @PriteshKiri

You might also like