809 reads

Creating Responsive Layouts in CSS Grids as a Beginner [A How-To Guide]

by Muhammad fahad UmerMay 9th, 2020

Too Long; Didn't Read

Creating Responsive Layouts in CSS Grids as a Beginner [A How-To Guide] The guide uses the CSS feature "GRID" and media queries. It is a technique to write code for different screen sizes in a single style sheet. We can create every type of design by using the GRID. A grid layout consists of a parent element, with one or more child elements. The Grid is a parent property it applies to all its children. The view port is the size of the window or screen for which we want to develop webpage.

Companies Mentioned

featured image - Creating Responsive Layouts in CSS Grids as a Beginner [A How-To Guide]

Do you love the responsiveness of design? Do you want to know how to make layout responsive? You don't like to use bootstrap? I am going to show you how to make your website responsive without using bootstrap. We are going to create an online shop website layout.

We will use the CSS feature "GRID" and media queries. First of all, we are going to create a basic structure of the design. In this design, there is a header for logo, navbar, content section, sidebar, and footer. In the content section, there are four divisions for our products. I had added the background color and border for every section.

CSS Code for Border , Height and Background Color

* {
  margin: 0;
  padding: 0;
}
body{
  background-color: darkgray;
}

main {
  max-width: 1310px;
  padding: 0 10px;
  margin: 0 auto;
}

header {
  border: 1px solid black;
  background-color: burlywood;
  height: 100px;
}

nav {
  border: 1px solid black;
  background-color: cadetblue;
  height: 60px;
}

.content-container {
  border: 1px solid black;
  background-color: coral;
}

.product {
  border: 1px solid black;
  background-color: cyan;
}


.product > div {
  border: 1px solid black;
  height: 450px;
} 

.sidebar {
  border: 1px solid black;
  background-color: darkorchid;
  min-height: 100px;
}

footer {
  height: 100px;
  border: 1px solid black;
  background-color: firebrick;
}

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Reshape Layout of Grid</title>
</head>
<body>
  <main>
    <header>
      <h1>Header Section</h1>
    </header>

    <nav>
      <h2>Navbar section</h2>
    </nav>

    <div class="content-container">
      <div class="content-box">
        <h2>Product Section</h2>
        <div class="product">
          <div>
          <h3> Product section one</h3>
          </div>

          <div>
          <h3> Product section two</h3>
          </div>

          <div>
          <h3> Product section three</h3>
          </div>

          <div>
          <h3> Product section four</h3>
          </div>
        </div>
      </div>
      
      <div class="sidebar">
         <h3>Sidebar Section</h3>
      </div>

    </div>
    
    <footer>
       <h3>footer Section</h3> 
    </footer>
  </main>
  
</body>
</html>

Now our page looks like this.

Before we start, we should know a little bit about some important things

The Grid
View port
Media Query

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. A grid layout consists of a parent element, with one or more child elements. (W3C.org).

It is clear that the Grid designed for creating and designing the layout of any webpage. We can create every type of design by using the GRID. GRID is a parent property it applies to all its children.

View port

The view port is the size of the window or screen for which we want to develop our webpage.There are three categories of view ports:

Laptop (1024px - 1920px)
Tablets (700px - 900px)
Mobiles (320px - 480px)

NOTE: Always try to style for smaller screens first.

Media Query

It was introduced in CSS 2. It is a technique to write code blocks for different screen sizes in a single style sheet.

@media (min-width:700px){
}

Grid is a parent property so we will apply it to the main element.

The grid works in two dimensions rows and columns. After applying a grid display to the main element we have to create rows or columns as per our need.It will not work until we create rows or columns.

As we need Four rows for my main layout.

Header
Navbar
Content-box with sidebar
footer

main {
  max-width: 1310px;
  padding: 0 10px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: repeat(4 , auto);
}

Note: grid-template-rows : repeat(4, auto); will create four rows with auto height.

Now we have to complete the product section.In the product section, there are two divisions one for Products and one for a sidebar.Inside the product section, there are four divisions to show our products.For smaller screens, there should be only one product in one row. For smaller screens, there should be two products in one row. For smaller screens, there should be four products in one row. For this purpose, we will use media queries.

CSS Media Query for Smaller Screen (Products)

.product {
  border: 1px solid black;
  background-color: cyan;
  display: grid;
  grid-template-columns:  1fr;
  grid-column-gap: 0.5rem;
}

CSS Media Query for Medium Screen (Products)

@media (min-width:480px){
  .product {
    grid-template-columns:  repeat(2, 1fr);
  }
}

CSS Media Query for Large Screen (Products)

@media (min-width:700px){
  .product {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}

For Small Devices

For Medium Devices

For Large Screen

Complete HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Reshape Layout of Grid</title>
</head>
<body>
  <main>
    <header>
      <h1>Header Section</h1>
    </header>

    <nav>
      <h2>Navbar section</h2>
    </nav>

    <div class="content-container">
      <div class="content-box">
        <h2>Product Section</h2>
        <div class="product">
          <div>
          <h3> Product section one</h3>
          </div>

          <div>
          <h3> Product section two</h3>
          </div>

          <div>
          <h3> Product section three</h3>
          </div>

          <div>
          <h3> Product section four</h3>
          </div>
        </div>
      </div>
      
      <div class="sidebar">
         <h3>Sidebar Section</h3>
      </div>

    </div>
    
    <footer>
       <h3>footer Section</h3> 
    </footer>
  </main>
  
</body>
</html>

Complete CSS Code

* {
  margin: 0;
  padding: 0;
}
body{
  background-color: darkgray;
}

main {
  max-width: 1310px;
  padding: 0 10px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: repeat(4 , auto);
}

header {
  border: 1px solid black;
  background-color: burlywood;
  height: 100px;
}

nav {
  border: 1px solid black;
  background-color: cadetblue;
  height: 60px;
}

.content-container {
  border: 1px solid black;
  background-color: coral;
  display: grid;
  grid-template-columns:1fr;
}

.product {
  border: 1px solid black;
  background-color: cyan;
  display: grid;
  grid-template-columns:  1fr;
  grid-column-gap: 0.5rem;
}


.product > div {
  border: 1px solid black;
  height: 450px;
} 

.sidebar {
  border: 1px solid black;
  background-color: darkorchid;
  min-height: 100px;
}

footer {
  height: 100px;
  border: 1px solid black;
  background-color: firebrick;
}

@media (min-width:480px){
  .product {
    grid-template-columns:  repeat(2, 1fr);
  }
}

@media (min-width:700px){
  .product {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}


@media (min-width:900px) {
  .content-container {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }

}