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
