CSS Grid and Media Queries

Syed Aquib AliSyed Aquib Ali
9 min read

Table of contents

CSS Grid

CSS Grid Layout is a powerful tool for creating two-dimensional layouts on the web. It allows you to define rows and columns in a container, and place child elements within this grid. Here's an in depth explanation about grid properties:

Container Properties:

  1. display: grid

To start using CSS Grid, you need to set the container's display property to grid.

.container {
    display: grid;
}

  1. grid-template-columns

The grid-template-columns property defines the number and width of the columns in the grid container.

.container {
    grid-template-columns: 100px 200px auto;
}
  • It defines that there will be 3 columns with first 100px, second 200px, and the third takes up the remaining space auto.

  1. grid-template-rows

The grid-template-rows property defines the number and height of the rows in the grid container.

.container {
    grid-template-rows: 50px 100px auto;
}
  • It defines that there will be 3 rows with first 50px, second 100px, and the third takes up the remaining space auto.

  1. grid-auto-rows

The grid-auto-rows property specifies the size of rows that are created implicitly (not explicitly defined in grid-template-rows).

.container {
    grid-auto-rows: 100px;
}
  • Any rows created automatically will be 100px high.

  1. gap

The gap property (formerly known as grid-gap) sets the spacing between rows and columns.

.container {
    gap: 10px 20px;
 /* gap: <row-gap> <column-gap>; */
}
  • There will be a 10px gap between rows and a 20px gap between columns.

  1. grid-template-areas

The grid-template-areas property allows you to define named grid areas within the grid container.

.container {
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
}
header {
    grid-area: header;
}
sidebar {
    grid-area: sidebar;
}
main {
    grid-area: main;
}
footer {
    grid-area: footer;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Template Areas Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
    <header>Header</header>
    <sidebar>Sidebar</sidebar>
    <main>Main</main>
    <footer>Footer</footer>
    </div>
</body>
</html>
  • The grid layout will have a header taking (spanning) two columns, a sidebar and main area in the second row, and a footer taking (spanning) two columns in the third row.

  1. justify-content

The justify-content property aligns the grid container's content along the inline (row) axis. There are seven values in this property as mentioned below:

  • start

  • end

  • center

  • stretch

  • space-between

  • space-around

  • space-evenly

.container {
    justify-content: center;
}
  • The grid items will be centered horizontally.

  1. align-content

The align-content property aligns the grid container's content along the block (column) axis. There are seven values in this property as mentioned below:

  • start

  • end

  • center

  • stretch

  • space-between

  • space-around

  • space-evenly

.container {
    align-content: center;
}
  • The grid items will be centered vertically.

  1. align-items

The align-items property aligns grid items along the block (column) axis within their grid area. There are four values in this property as mentioned below:

  • start

  • end

  • center

  • stretch (default)

.container {
    align-items: center;
}
  • Each grid item will be centered within its grid area vertically.

  1. grid-column-start and grid-column-end

The grid-column-start and grid-column-end properties specify the grid item's starting and ending column line.

.item1 {
    grid-column-start: 1;
 /* grid-column-start: <line>; */
    grid-column-end: 3;
 /* grid-column-end: <line>; */
}
  • The grid item will span from the first to the third column.

  1. grid-column

The grid-column property is a shorthand for setting grid-column-start and grid-column-end.

.item1 {
    grid-column: 1 / 3;
 /* grid-column: <start> / <end>; */
}
  • The grid item will span from the first to the third column.

  1. grid-row

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

.item1 {
    grid-row: 1 / 3;
 /* grid-row: <start> / <end>; */
}
  • The grid item will span from the first to the third row.

  1. grid-area

The grid-area property specifies a grid item's location and size within the grid, combining grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

.item1 {
    grid-area: 1 / 1 / 3 / 3;
 /* grid-area: <row-start> / <column-start> / <row-end> / <column-end>; */
}
  • The grid item will span from row 1 to 3 and column 1 to 3.

Here's an example using all these properties

.container {
    display: grid;
    grid-template-columns: 100px 200px auto;
    grid-template-rows: 50px 100px auto;
    gap: 10px 20px;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    justify-content: center;
    align-content: center;
    align-items: stretch;
    height: 500px;
    border: 2px solid black;
}

.header {
    grid-area: header;
    background-color: lightblue;
}

.sidebar {
    grid-area: sidebar;
    background-color: lightcoral;
}

.main {
    grid-area: main;
    background-color: lightgreen;
}

.footer {
    grid-area: footer;
    background-color: lightyellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="sidebar">Sidebar</div>
        <div class="main">Main</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

Explanation of the code:

  • grid-template-columns and grid-template-rows: Define three columns and three rows of varying sizes.

  • gap: Sets a 10px gap between rows and a 20px gap between columns.

  • grid-template-areas: Defines named areas within the grid.

  • justify-content and align-content: Center the entire grid within the container.

  • align-items: Stretches the grid items to fill their grid areas vertically.

Item Properties:

  1. justify-self

The justify-self property aligns the grid item along the inline (row) axis within its grid area. This property is used to override the container's justify-items property for individual items. There are four values in this property:

  • start: Aligns the item at the start of the grid area.

  • end: Aligns the item at the end of the grid area.

  • center: Centers the item within the grid area.

  • stretch: Stretches the item to fill the grid area (default).

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

.item1 {
    justify-self: start;
    background-color: lightblue;
}

.item2 {
    justify-self: end;
    background-color: lightcoral;
}

.item3 {
    justify-self: center;
    background-color: lightgreen;
}

.item4 {
    justify-self: stretch;
    background-color: lightyellow;
}

  • .item1 is aligned at the start of its grid area.

  • .item2 is aligned at the end of its grid area.

  • .item3 is centered within its grid area.

  • .item4 is stretched to fill its grid area.

  1. align-self

The align-self property aligns the grid item along the block (column) axis within its grid area. This property is used to override the container's align-items property for individual items. There are four values in this property:

  • start: Aligns the item at the start of the grid area.

  • end: Aligns the item at the end of the grid area.

  • center: Centers the item within the grid area.

  • stretch: Stretches the item to fill the grid area (default).

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

.item1 {
    align-self: start;
    background-color: lightblue;
}

.item2 {
    align-self: end;
    background-color: lightcoral;
}

.item3 {
    align-self: center;
    background-color: lightgreen;
}

.item4 {
    align-self: stretch;
    background-color: lightyellow;
}

  • .item1 is aligned at the start of its grid area.

  • .item2 is aligned at the end of its grid area.

  • .item3 is centered within its grid area.

  • .item4 is stretched to fill its grid area.

Here's an example using these both properties:

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    gap: 10px;
    height: 350px;
    border: 2px solid black;
}
.item1 {
    justify-self: start;
    align-self: start;
    background-color: lightblue;
}
.item2 {
    justify-self: end;    
    align-self: end;
    background-color: lightcoral;
}
.item3 {
    justify-self: center;
    align-self: center;
    background-color: lightgreen;
}
.item4 {
    justify-self: stretch;
    align-self: stretch;
    background-color: lightyellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Item Properties Example</title>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
        <div class="item4">Item 4</div>
    </div>
</body>
</html>

  • .item1: Aligned at the start on both axes.

  • .item2: Aligned at the end on both axes.

  • .item3: Centered on both axes.

  • .item4: Stretched to fill the grid area on both axes.

We can achieve a layout using CSS flex as well, and CSS grid can do as much as CSS flex can do. But CSS grid has much more power while creating a grid-like layout hence these properties exists inside our CSS. We have more control over our layout design in two dimensions as compared to CSS flex that as one dimension only.

Media Queries

Media queries are used in CSS to apply different styles for different devices and screen sizes. They help us to create responsive designs that adapt to various screen resolutions. Here are media queries for the specified sizes and the common devices they are associated with:

  1. 640px for Mobile Phones

@media only screen and (max-width: 640px) {
    /* Styles for mobile phones */
    body {
        background-color: lightblue;
    }
}

  1. 768px for Tablets

@media only screen and (max-width: 768px) {
    /* Styles for tablets */
    body {
        background-color: lightgreen;
    }
}

  1. 1024px for Laptops

@media only screen and (max-width: 1024px) {
    /* Styles for small laptops or large tablets */
    body {
        background-color: lightcoral;
    }
}

  1. 1280px for Desktops

@media only screen and (max-width: 1280px) {
    /* Styles for desktops and larger laptops */
    body {
        background-color: lightgoldenrodyellow;
    }
}

  1. 1536px for Wider Desktops and Monitors

@media only screen and (max-width: 1536px) {
    /* Styles for large desktops and high-resolution monitors */
    body {
        background-color: lightpink;
    }
}

Here's a combined example of Media Query:

/* Base styles */
body {
    font-family: Arial, sans-serif;
}

/* Mobile phones (max-width: 640px) */
@media only screen and (max-width: 640px) {
    body {
        background-color: lightblue;
        font-size: 14px;
    }
}

/* Tablets (max-width: 768px) */
@media only screen and (max-width: 768px) {
    body {
        background-color: lightgreen;
        font-size: 16px;
    }
}

/* Laptops (max-width: 1024px) */
@media only screen and (max-width: 1024px) {
    body {
        background-color: lightcoral;
        font-size: 18px;
    }
}

/* Desktops (max-width: 1280px) */
@media only screen and (max-width: 1280px) {
    body {
        background-color: lightgoldenrodyellow;
        font-size: 20px;
    }
}

/* Large desktops and high-resolution monitors (max-width: 1536px) */
@media only screen and (max-width: 1536px) {
    body {
        background-color: lightpink;
        font-size: 22px;
    }
}

By using @media only screen and, these media queries ensure that your web content is responsive and adapts to different devices ranging from mobile phones to large desktop monitors.

TIP: There's a great rule which many CSS frameworks follow, they always follow a mobile first design, It's easy to create responsive designs for creating small screen to bigger screens. We should always follow this rule as well even if we are not using any CSS framework.

0
Subscribe to my newsletter

Read articles from Syed Aquib Ali directly inside your inbox. Subscribe to the newsletter, and don't miss out.

CSS GridcssMediaQueriesCSSCSS3

Written by

Syed Aquib Ali
Syed Aquib Ali

I am a MERN stack developer who has learnt everything yet trying to polish his skills 🥂, I love backend more than frontend.