Responsive design-CSS grid layout module

Introduction to CSS grid layout

CSS grid is a two dimensional representation of elements on your web page. An HTML alone cannot complete the process of developing web page in an interactive way and therefore, many CSS properties has been introduced to beautify your web page.

First of all we used tables, then made elements to float, positioned elements, inline-blocks used but all of these properties worked up to some extend only. After all of these properties, flexbox introduced to makes changes in web page. A flexbox is a good concept but it allows you to represent elements in one direction only, either horizontally or vertically.

Grid is the very first CSS module created specifically to solve the layout problems. Actually CSS grid and flexbox work together to make your web page responsive and beautiful.

In short, 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.

Display property of Grid in CSS

An HTML becomes a grid container when its display property is set as display:grid or inline-grid.

container1{
          display:grid;}
container2{
          display:inline-grid;}

Grid line:

The lines which divide web page into rows and columns are the grid lines. A figure below is showing grid lines.

grid lines, www.programmingtutorial.in
programmingtutorial.in

Grid Cell:

The space between the two grid rows and two grid columns is the grid cell.

Grid cell, www.programmingtutorial.in
programmingtutorial.in

Grid rows and grid columns:

The horizontal lines of grid items are called as grid rows and the vertical lines of grid items are called as grid columns.

grid rows and columns, www.programmingtutorial.in
www.programmingtutorial.in

Grid gap in CSS

The space between two rows or two columns is called as grid gap. You have an options to adjust the grid row gap and grid columns gap by using the following properties.

grid-column-gap:

You can set grid column gap with the help of grid-column-gap.

grid-row-gap:

The grid-row-gap sets gap between two rows.

grid-gap

The grid-gap property is a shorthand property for the grid-row-gap and the grid-column-gap properties:

Grid Container:

Any element where display property is set as display:grid becomes its grid container. Grid containers consist of grid items which are placed inside rows and columns.

The grid-template-columns property in CSS

This property defines the number of columns in grid layout. It can also define the width of each column. The values for different columns can be set with pixel values. If you want your grid layout to contain 3 columns then specify the width of each column or you can set as auto if you want to keep each column with same width.

container{
         display:grid;
         grid-template-columns:100px 200px auto;}
<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: 300px auto 300px;
  grid-gap: 20px;
  background-color: #21f38a;
  padding: 5px;
}
div {
  background-color: rgba(37, 184, 17, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>grid-template-columns</h1>
<p>Three columns with two sidebars of 300 pixel width and the middle one is auto.</p>
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>  
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>  
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
</div>
</body>
</html>
grid-template-columns

The auto value will take the remaining space of the screen.

The grid-template-rows property in CSS

This property defines the number of rows in grid layout. It can also define the height of each row. The values for different rows can be set with pixel values. If you want your grid layout to contain 3 rows then specify the height of each row.

container{
         display:grid;
         grid-template-rows:100px 200px auto;}
<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-template-rows: 50px 100px 200px;
  grid-gap: 20px;
  background-color: #8096b3;
  padding: 5px;
  width:75%;
}
div {
  background-color: rgba(47, 46, 122, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>grid-template-rows</h1>
<p>Three rows with height 50 pixel 100 pixel and 200 pixel.</p>
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>  
</div>
</body>
</html>
grid-template-rows

The justify-content property in CSS

The justify-content property is used to align the whole grid inside the container. This property can take the following values.

  • start: Aligns grid items at start position.
  • end: Aligns grid items at end position.
  • center: Aligns grid items at center.
  • stretch: Aligns grid items to the full extent of available width.
  • space-around: Places an even amount of space between each grid item, with half-sized spaces on the far ends.
  • space-between: Places an even amount of space between each grid item, with no space at the far ends.
  • space-evenly: Places an even amount of space between each grid item, including the far ends.

Let us write a code to understand the justify-content property

<!DOCTYPE html>
<html>
<head>
<style>
.container1 {
  display: grid;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 100px 150px 200px;
  grid-gap: 20px;
  background-color: #c268a7;
  padding: 5px;
  width:50%;
  justify-content: start;
}
.container2 {
  display: grid;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 100px 150px 200px;
  grid-gap: 20px;
  background-color: #c268a7;
  padding: 5px;
  width:50%;
  justify-content: end;
}
.container3 {
  display: grid;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 100px 150px 200px;
  grid-gap: 20px;
  background-color: #c268a7;
  padding: 5px;
  width:50%;
  justify-content: center;
}
.container4 {
  display: grid;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 100px 150px 200px;
  grid-gap: 20px;
  background-color: #c268a7;
  padding: 5px;
  width:50%;
  justify-content: space-between;
}
.container5 {
  display: grid;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 100px 150px 200px;
  grid-gap: 20px;
  background-color: #c268a7;
  padding: 5px;
  width:50%;
  justify-content: space-evenly;
}
.container1>div {
  background-color: rgba(117, 4, 74, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 20px;
  color:white;
}
.container2>div {
  background-color: rgba(117, 4, 74, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 20px;
  color:white;
}
.container3>div {
  background-color: rgba(117, 4, 74, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 20px;
  color:white;
}
.container4>div {
  background-color: rgba(117, 4, 74, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 20px;
  color:white;
}
.container5>div {
  background-color: rgba(117, 4, 74, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 20px;
  color:white;
}
</style>
</head>
<body>
<h2>Justify-content at start</h2>
<div class="container1">
  <div>One</div>
  <div>Two</div>
  <div>Three</div> 
  <div>Four</div>
  <div>Five</div>
  <div>Six</div> 
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div> 
</div>
<h2>Justify-content at end</h2>
<div class="container2">
  <div>One</div>
  <div>Two</div>
  <div>Three</div> 
  <div>Four</div>
  <div>Five</div>
  <div>Six</div> 
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div> 
</div>
<h2>Justify-content at center</h2>
<div class="container3">
  <div>One</div>
  <div>Two</div>
  <div>Three</div> 
  <div>Four</div>
  <div>Five</div>
  <div>Six</div> 
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div> 
</div>
<h2>Justify-content at space-between</h2>
<div class="container4">
  <div>One</div>
  <div>Two</div>
  <div>Three</div> 
  <div>Four</div>
  <div>Five</div>
  <div>Six</div> 
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div> 
</div>
<h2>Justify-content at spaced-evenly</h2>
<div class="container5">
    <div>One</div>
    <div>Two</div>
    <div>Three</div> 
    <div>Four</div>
    <div>Five</div>
    <div>Six</div> 
    <div>Seven</div>
    <div>Eight</div>
    <div>Nine</div> 
  </div>
</body>
</html>
justify content
Justify content at start and end
justify-content
programmingtutorial.in
justify-evenly-spaced
programmingtutorial.in

The align-content property in CSS

The align-content property is used to vertically align the whole grid in a container. Align-content aligns grids along row axis. The align-content property has the following values.

  • start: Align rows at the start of the column axis and is the default value.
  • end: Rows are aligned at the end of the column axis.
  • center: Rows are aligned at the center of the column axis
  • stretch: Aligns grid items to the full extent of available width.
  • space-around: The remaining space of the grid container is distributed and applied to the start and end of each row track.
  • space-between: The remaining space is distributed between the row tracks.
  • space-evenly: The remaining space is distributed where the space between the rows are equal to the space at the start and end of the column track.

Let us write a code to show the working procedure of align-content property:

<!DOCTYPE html>
<html>
<head>
<style>
.container1 {
  display: grid;
  grid-template-rows: 40px 40px 40px;
  grid-template-columns: 80px 80px 80px;
  grid-gap: 5px;
  background-color: #82bb77;
  padding: 5px;
  width:50%;
  height:200px;
  align-content: start;
}
.container2 {
  display: grid;
  grid-template-rows: 40px 40px 40px;
  grid-template-columns: 80px 80px 80px;
  grid-gap: 5px;
  background-color: #82bb77;
  padding: 5px;
  width:50%;
  height:200px;
  align-content: end;
}
.container3 {
  display: grid;
  grid-template-rows: 40px 40px 40px;
  grid-template-columns: 80px 80px 80px;
  grid-gap: 5px;
  background-color: #82bb77;
  padding: 5px;
  width:50%;
  height:200px;
  align-content: center;
}
.container4 {
  display: grid;
  grid-template-rows: 40px 40px 40px;
  grid-template-columns: 80px 80px 80px;
  grid-gap: 5px;
  background-color: #82bb77;
  padding: 5px;
  width:50%;
  height:200px;
  align-content: space-between;
}
.container5 {
  display: grid;
  grid-template-rows: 40px 40px 40px;
  grid-template-columns: 80px 80px 80px;
  grid-gap: 5px;
  background-color: #82bb77;
  padding: 5px;
  width:50%;
  height:200px;
  align-content: space-evenly;
}
.container1>div {
  background-color: rgba(6, 187, 36, 0.8);
  text-align: center;
  padding: 10px;
  font-size: 20px;
  color:white;
}
.container2>div {
  background-color: rgba(6, 187, 36, 0.8);
  text-align: center;
  padding: 10px;
  font-size: 20px;
  color:white;
}
.container3>div {
  background-color: rgba(6, 187, 36, 0.8);
  text-align: center;
  padding: 10px;
  font-size: 20px;
  color:white;
}
.container4>div {
  background-color: rgba(6, 187, 36, 0.8);
  text-align: center;
  padding: 10px;
  font-size: 20px;
  color:white;
}
.container5>div {
  background-color: rgba(6, 187, 36, 0.8);
  text-align: center;
  padding: 10px;
  font-size: 20px;
  color:white;
}
</style>
</head>
<body>
<h2>Align-content at start</h2>
<div class="container1">
  <div>One</div>
  <div>Two</div>
  <div>Three</div> 
  <div>Four</div>
  <div>Five</div>
  <div>Six</div> 
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div> 
</div>
<h2>Align-content at end</h2>
<div class="container2">
  <div>One</div>
  <div>Two</div>
  <div>Three</div> 
  <div>Four</div>
  <div>Five</div>
  <div>Six</div> 
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div> 
</div>
<h2>Align-content at center</h2>
<div class="container3">
  <div>One</div>
  <div>Two</div>
  <div>Three</div> 
  <div>Four</div>
  <div>Five</div>
  <div>Six</div> 
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div> 
</div>
<h2>Align-content at space-between</h2>
<div class="container4">
  <div>One</div>
  <div>Two</div>
  <div>Three</div> 
  <div>Four</div>
  <div>Five</div>
  <div>Six</div> 
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div> 
</div>
<h2>Align-content at spaced-evenly</h2>
<div class="container5">
    <div>One</div>
    <div>Two</div>
    <div>Three</div> 
    <div>Four</div>
    <div>Five</div>
    <div>Six</div> 
    <div>Seven</div>
    <div>Eight</div>
    <div>Nine</div> 
  </div>
</body>
</html>
align-content at start and align-content at end, www.programmingtutorial.in
www.programmingtutorial.in
align-content at center and align-content at space-between, www.programmingtutorial.in
www.programmingtutorial.in
align-content at spaced-evenly, www.programmingtutorial.in
www.programmingtutorial.in

Grid Items:

These are the descendants of grid container also known as direct children of grid container. An example below shows elements item1 and item2 as a grid items.

<div class="container">
        <div id="item1"></div>
        <div id="item2"></div>
</div>

By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows. The columns and rows can be spanned to make them one as per your requirement.

The grid-column property

The grid-column property defines on which column the item is to be placed. You can define start position and end position of an item. The grid-column property is the shorthand of grid-column-start and grid-column-end properties. To place an item, you can refer to line numbers, or use the keyword “span” to define how many columns the item will span. Its syntax is given below:

item{ grid-column: starting column number/ending column number}
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 5px;
  background-color: #c289aa;
  padding: 10px;
  width:75%;
}
.grid-container > div {
  background-color: rgba(228, 29, 105, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  color:white;
}
.item2 {
  grid-column: 2 / 6;
}
</style>
</head>
<body>
<h1>The grid-column Property</h1>
<p>Column line 2 to 6 are spanned</p>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>
</body>
</html>
grid-column property, www.programmingtutorial.in
www.programmingtutorial.in
item2{ grid:column:1/span 4;}

The grid-row property

The grid-row property defines on which row the item is to be placed. You can define start position and end position of an item. The grid-row property is the shorthand of grid-row-start and grid-row-end properties. To place an item, you can refer to line numbers, or use the keyword “span” to define how many rows the item will span.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
  background-color: #da8f72;
  padding: 10px;
  width:75%;
}
.grid-container > div {
  background-color: rgba(238, 32, 17, 0.329);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  color:white;
}
.item2 {
  grid-row: 2 / 4;
}
.item6 {
  grid-row: 3 / 5;
}
</style>
</head>
<body>
<h1>The grid-row Property</h1>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>
</body>
</html>
the grid-row-property, www.programmingtutorial.in
www.programmingtutorial.in

The grid-area property

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

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
  background-color: #9b5256;
  padding: 10px;
  width:75%;
}
.container > div {
  background-color: rgba(105, 14, 8, 0.329);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  color:white;
}
.item8 {
  grid-area: 2 / 2/ 5/ 4;
}
</style>
</head>
<body>
<h1>The grid-area property</h1>
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>
</body>
</html>
grid-area property, www.programmingtutorial.in
www.programmingtutorial.in