CSS grid tutorial responsive layout.

The CSS grid layout is a potent tool for the design of webpages; it is a two-dimensional CSS grid layout system that will completely change the way you design webpages. 

We still use rows and columns, but how we use them in an entirely different way from the way, we would typically add rows and columns to our webpages. 

For columns, we use grid-template-columns, and for rows grid-template-rows, we define these in a container with display: grid

Display Grid.

If the above sound a bit confusing, then hopefully the code below will shine more light on what is happening.

The first main-section is saying all columns will cover the entire width of the screen.

The second main-section is saying all columns will cover 50% of the screen width, as we have four articles in this example, we will, therefore, have two per row.

I could have used the new fr unit, but for this introduction to the CSS grid, I have used percentages. 

.main-section {
  display: grid;
  grid-template-columns: repeat(1,100%);

@media (min-width: 992px) {
  .main-section {
    display: grid;
    grid-template-columns: repeat(2,50%);

CSS grid tutorial.

To wrap up this tutorial introduction to the CSS grid layout, you can find the full HTML and CSS below.

If you copy and paste the code and test it yourself, you will notice how the page is responsive and how the footer sticks to the bottom of the page. 


<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>CSS Grid</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/styles.css">

    <header class="header">
        <nav class="navbar navbar-light navbar-expand-md">
            <div class="container-fluid"><a class="navbar-brand" href="#">Brand</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse"
                    <ul class="nav navbar-nav">
                        <li class="nav-item" role="presentation"><a class="nav-link active" href="#">First Item</a></li>
                        <li class="nav-item" role="presentation"><a class="nav-link" href="#">Second Item</a></li>
                        <li class="nav-item" role="presentation"><a class="nav-link" href="#">Third Item</a></li>
    <main class="main">
        <section class="main-section">
            <article class="article-one">
                <h1>Article One</h1>
                <p><strong>Lorem Ipsum</strong>& is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
                    Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br></p>
            <article class="article-two">
                <h1>Article Two</h1>
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
                    'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still
                    in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br></p>
            <article class="article-three">
                <h1>Article Three</h1>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage
                    of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator
                    on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition,
                    injected humour, or non-characteristic words etc.<br></p>
            <article class="article-four">
                <h1>Article Four</h1>
                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
                    looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source<br></p>
    <footer class="footer">
        <p>I'm the footer</p>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script></script>



.header {
  background-color: orange;

.main-section {
  display: grid;
  grid-template-columns: repeat(1,100%);

@media (min-width: 992px) {
  .main-section {
    display: grid;
    grid-template-columns: repeat(2,50%);

section {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;

.footer {
  background-color: red;
  padding: 1rem;

.article-one {
  background-color: pink;

.article-two {
  background-color: gold;

.article-three {
  background-color: purple;

.article-four {
  background-color: green;

.main-section > article {
  padding: 20px;

The screenshot below shows the support for the CSS grid layout in browsers and copied from https://caniuse.com/

CSS grid layout support