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 * { : ;
  padding: ;
}
body{
  background-color: darkgray;
}

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

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

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

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

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


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

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

footer { : px;
  border: px solid black;
  background-color: firebrick;
} margin 0 0 1310 0 10 0 border 1 100 border 1 60 border 1 border 1 border 1 450 border 1 100 height 100 1 HTML code Reshape Layout of Grid Header Section Navbar section Product Section Product section one Product section two Product section three Product section four Sidebar Section footer Section <!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 </ > title </ > head < > body < > main < > header < > h1 </ > h1 </ > header < > nav < > h2 </ > h2 </ > nav < = > div class "content-container" < = > div class "content-box" < > h2 </ > h2 < = > div class "product" < > div < > h3 </ > h3 </ > div < > div < > h3 </ > h3 </ > div < > div < > h3 </ > h3 </ > div < > div < > h3 </ > h3 </ > div </ > div </ > div < = > div class "sidebar" < > h3 </ > h3 </ > div </ > div < > footer < > h3 </ > 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 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). GRID 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) Always try to style for smaller screens first. NOTE: 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: px){
} 700 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 { : ; : ; : auto; : grid; : (4 , auto);
} main max-width 1310px padding 0 10px margin 0 display grid-template-rows repeat grid-template-rows : repeat(4, auto); will create four rows with auto height. Note: 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) { : solid black; : cyan; : grid; : fr; : ;
} .product border 1px background-color display grid-template-columns 1 grid-column-gap 0.5rem CSS Media Query for Medium Screen  (Products) @ (min-width: ){ { : (2, 1fr);
  }
} media 480px .product grid-template-columns repeat CSS Media Query for Large Screen  (Products) @ (min-width: ){ { : grid; : (4, 1fr);
  }
} media 700px .product display grid-template-columns repeat For Small Devices For Medium Devices For Large Screen Complete HTML Code Reshape Layout of Grid Header Section Navbar section Product Section Product section one Product section two Product section three Product section four Sidebar Section footer Section <!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 </ > title </ > head < > body < > main < > header < > h1 </ > h1 </ > header < > nav < > h2 </ > h2 </ > nav < = > div class "content-container" < = > div class "content-box" < > h2 </ > h2 < = > div class "product" < > div < > h3 </ > h3 </ > div < > div < > h3 </ > h3 </ > div < > div < > h3 </ > h3 </ > div < > div < > h3 </ > h3 </ > div </ > div </ > div < = > div class "sidebar" < > h3 </ > h3 </ > div </ > div < > footer < > h3 </ > h3 </ > footer </ > main </ > body </ > html Complete CSS Code * { : ; : ;
} { : darkgray;
} { : ; : ; : auto; : grid; : (4 , auto);
} { : solid black; : burlywood; : ;
} { : solid black; : cadetblue; : ;
} { : solid black; : coral; : grid; : fr;
} { : solid black; : cyan; : grid; : fr; : ;
} > { : solid black; : ;
} { : solid black; : darkorchid; : ;
} { : ; : solid black; : firebrick;
}

@ (min-width: ){ { : (2, 1fr);
  }
}

@ (min-width: ){ { : grid; : (4, 1fr);
  }
}


@ (min-width: ) { { : grid; : fr fr;
  }

} margin 0 padding 0 body background-color main max-width 1310px padding 0 10px margin 0 display grid-template-rows repeat header border 1px background-color height 100px nav border 1px background-color height 60px .content-container border 1px background-color display grid-template-columns 1 .product border 1px background-color display grid-template-columns 1 grid-column-gap 0.5rem .product div border 1px height 450px .sidebar border 1px background-color min-height 100px footer height 100px border 1px background-color media 480px .product grid-template-columns repeat media 700px .product display grid-template-columns repeat media 900px .content-container display grid-template-columns 3 1 I will be happy if this article helps anyone. Thanks

Too Long; Didn't Read

Making security fun one episode at a time

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

Too Long; Didn't Read

Muhammad fahad Umer

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Muhammad fahad Umer

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES