7.

CSS Grid and Media Queries

Table of Content
1. CSS Grid

2. Media Queries

CSS Grid
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns,
making it easier to design web pages without having to use floats and positioning.
An HTML element becomes a grid container when its display property is set to grid

Grid Container
These are the grid container properties:

gap
the gap is a shorthand property for row-gap and column-gap

grid-template-columns
The grid-template-columns property defines the number of columns in your grid
layout, and it can define the width of each column.
The value is a space-separated list, where each value defines the width of the
respective column.

.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
grid-template-columns: auto auto auto auto;
}

grid-template-rows
The grid-template-rows property defines the height of each row.

7. CSS Grid and Media Queries 1

 .grid-container {
display: grid;
grid-template-rows: 80px 200px;
}

justify-content
The justify-content property is used to align the whole grid inside the container.
It can have the following values:

space-evenly

space-between

space-around

center

start

end

align-content
The align-content property is used to vertically align the whole grid inside the
container. It can have the following values:

space-evenly

space-between

space-around

center

start

end

align-items
To align the items inside the grid.

grid-template-areas

Named grid items can be referred to by the grid-template-areas property of the

grid container. The grid-area property can also be used to assign names to grid

7. CSS Grid and Media Queries 2

 items.

.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}

.item1 { grid-area: header; }

.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

Grid Item

These are the grid item's properties:

grid-column

The grid-column property defines on which column(s) to place an item. You

define where the item will start, and where the item will end. The grid-column
property is a shorthand property for the grid-column-start and the grid-column-
end properties.

7. CSS Grid and Media Queries 3

 .item1 {
grid-column: 1 / 5;
}

.item1 {
grid-column: 1 / span 3;
}

grid-row

The grid-row property defines on which row to place an item. You define where
the item will start, and where the item will end.

The grid-row property is a shorthand property for the grid-row-start and the grid-
row-end properties.

grid-area

The grid-area property can be used as a shorthand property for the grid-row-
start, grid-column-start, grid-row-end, and grid-column-end properties.

7. CSS Grid and Media Queries 4

 .item8 {
grid-area: 1 / 2 / 5 / 6;
grid-area: 2 / 1 / span 2 / span 3;
}

justify-self
Aligns a grid item inside a cell along the inline (row) axis

start

end

center

strech

align-self

Aligns a grid item inside a cell along the block (column) axis (as opposed to
justify-self which aligns along the inline (row) axis). This value applies to the
content inside a single grid item.

start

end

center

strech

7. CSS Grid and Media Queries 5

 Media Queries
Media queries are used to develop responsive web designs (RWDs). It uses the @media

rule to include a block of CSS properties only if a certain condition is true.

@media only screen and (max-width: 600px) {

body {
background-color: lightblue;
}
}

Types of Breakpoints

1. Device Width Breakpoint

/* Extra small devices (phones, 600px and down) */

@media screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */

@media screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */

@media screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media screen and (min-width: 1200px) {...}

Read min-width as “start from” and max-width as “upto”

Breakpoint defaults in Tailwind:

7. CSS Grid and Media Queries 6

 2. Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the
orientation of the browser.
You can have a set of CSS properties that will only apply when the browser
window is wider than its height, a so called "Landscape" orientation:

@media screen and (orientation: landscape) {

body {
background-color: lightblue;
}
}

Further Readings:

7. CSS Grid and Media Queries 7

 https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

https://developer.mozilla.org/en-
US/docs/Web/CSS/Media_Queries/Using_media_queries

Assignments:
1. Build a Calculator layout like this:

2. Build a responsive layout using Grid:

7. CSS Grid and Media Queries 8

 3. Build a responsive blog post website like this one

7. CSS Grid and Media Queries 9

7. CSS Grid and Media Queries 10