Scribd
Upload
17 views10 pages

CSS Grid: A Guide for Developers

Uploaded by

Ganeshpandi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views10 pages

CSS Grid: A Guide for Developers

Uploaded by

Ganeshpandi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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