Open CheatSheet Back To List Next Tutorial

Grid Layout (Video Tutorial)

Video Timestamps
0:00 Add grid classes to our web pages. 2:49 The CSS file. Set grid-related style rules. 3:34 Bootstrap grid layout.

Grid Layout

Intro to Grid Layout

Build a Blog Site: This is the fourth part of the Build a Blog Site tutorial series.
The focus of this tutorial is on using the Grid layout to space elements on our web page.

Simulate Bootstrap: In this tutorial series we are mimicking Bootstrap classes, using the same Bootstrap class names, and applying the same or similar style but with less complex style rules.

Finished Code: The code is available on GitHub: github.com/LearnByCheating/learn-html-blog-site-example. There is a separate version with the finished code for each tutorial.

Live Server: If you are using VS Code as your text editor and have the Live Server extension installed, you can launch a local web server from the Editor.
  • Close any prior Live Server sessions by right-clicking in the editor, then select Stop Live Server.
  • If you are using the code from the GitHub link above, go to the .vscode/settings.json file and change the liveServer.settings.root value to the appropriate version: "liveServer.settings.root": "/v4-grid" 
  • Right click in the html page and select "Open with Live Server". 

Written and Video tutorial: There are both a video and written version of each tutorial. For the HTML-CSS tutorial series the video and written versions have a different focus. The video tutorials are focused on the blog site project. The written tutorial is focused on the all the subtopics within the CheatSheet major topic.

CheatSheet: Part of the objective of this tutorial series is to become familiar with the CheatSheet so you can use it for quick reference going forward. As such, it is recommended that you review the CheatSheet category that aligns with this tutorial.

Bootstrap Grid

CSS Grid layout was added to the major browsers in 2017 so it is still relatively new. 
The grid allows you to divide your web page into major regions which you can align into the layout you desire.

Reference: For Bootstrap documentation for the Grid, go to getbootstrap.com/docs and click on Layout: Grid.

Bootstrap was originally released in 2011, long before the CSS grid existed, so Bootstrap uses CSS Flexbox layout for its grid. We will use the CSS Grid layout, so our approach will differ from Bootstrap's, and some of the class names will be different.


Add Bootstrap Grid classes to the Blog Site project

Add Bootstrap grid classes to the Blog Site index.html page:
  • In the index file head element, add a link to the Bootstrap CDN.
    • Get the latest CDN links from getbootstrap.com home page. Scroll to "Include via CDN" and copy the CSS link, then paste it the index file.
    • Paste the Bootstrap JavaScript CDN link to the bottom of the page.
    • Comment out the link to the mimic-bootstrap.css stylesheet.
  • We will use the Bootstrap grid layout create two columns below the heading. 
    • The column to the left will hold the article elements that contain article information.
    • The column to the right will contain the aside element that contains the About section.
  • Wrap the above columns in an element, we'll use a div, and add the row class.
  • By default, columns have a 1.5rem gap between them. We will change it to 3rem by adding class g-5 to the div.
  • The bootstrap grid consists of 12 columns. 
    • To make the articles column take up 2/3 of the available screen width, wrap the articles in a div, and assign it to class col-md-8. 8 out of 12 columns is 2/3 of the screen width.
    • To make the About column take up 1/3 of the available screen width, assign it to class col-md-4. 4 out of 12 columns is 1/3 of the screen width.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="INSERT SITE DESCRIPTION HERE (158 Chars max)">
  <meta name="author" content="YOUR NAME HERE (optional)">
  <title>Blog Site</title>
  PASTE BOOTSTRAP CSS CDN LINK HERE
</head>
<body>
  <nav class="text-white bg-dark">Navigation Bar Here</nav>
  <main>
    <article class="text-white bg-dark">
      <h1>Highlighted Article title 1</h1>
      <p>Summary and link.</p> 
    </article>
    <div class="row g-5">
      <div class="col-md-8">
        <article>
          <h3>Highlighted Article title 2</h3>
          <p class="text-muted">Author and date</p>
          <p>Summary and link.</p> 
        </article>
        <article>
          <h3>Highlighted Article title 3</h3>
          <p class="text-muted">Author and date</p>
          <p>Summary and link.</p> 
        </article>
        <article>
          <h3>Article title N</h3>
          <p class="text-muted">Author and date</p>
          <p>Summary and link.</p> 
        </article>
      </div>
      <div class="col-md-4">
        <aside class="bg-light">
          <h4>About</h4>
          <p>About you, your business, and/or your blog content focus.</p>
          <p>Lorem ipsum...</p>
          <address>email: me@example.com</address>
        </aside>
      </div>
    </div>
  </main>
  <footer class="bg-light">Footer Here</footer>
  PASTE BOOTSTRAP JAVASCRIPT CDN LINK HERE
</body>
</html>

Responsive Breakpoints:
  • The md in the class name relates to screen width responsive breakpoints. In this case, it will display two columns when the screen width is 768 pixels wide or greater. If it is less than 768 pixels wide, there will be one column, with the Articles section displaying first, then the About section.

Below are the Bootstrap Grid responsive breakpoints:
Sizexssmmdlgxlxxl
Class prefix.col-.col-sm-.col-md-.col-lg-.col.xl-.col-xxl-
Breakpoint:<576px≥576px≥768px≥992px≥1200px≥1400px

View the results:
  • If you are using VS Code with the Live Server extension installed, right click the page's Editor and select "Open with Live Server". 
  • Then go to the browser at http://127.0.0.1:5500, and the About side bar should now be to the right of the Article summaries.
  • You can see the responsiveness by changing the width of the browser window. When it is less than 768 pixels, the two columns should collapse into one.

CSS Grid

When mimicking Bootstrap, we'll use the CSS Grid instead of the Bootstrap Grid. 
  • In the head element:
    • Comment out the Bootstrap CDN.
    • Link to the mimic-bootstrap.css stylesheet.
  • Leave the row and g-5 classes in the div element that contains the columns.
    • Add another class to the wrapping div named grid-67-33. This is not a Bootstrap class. Rather it's a custom class we'll define shortly. It replaces the Bootstrap col-md-8 and col-md-4 classes.
    • We won't define the col-md-8 and col-md-4 classes. We will leave them in there for demonstration purposes, so that we can go back and forth between using the Bootstrap CDN and and our mimic-bootstrap stylesheets.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="INSERT SITE DESCRIPTION HERE (158 Chars max)">
  <meta name="author" content="YOUR NAME HERE (optional)">
  <title>Blog Site</title>
  <!-- COMMENT OUT THE BOOTSTRAP STYLESHEET CDN -->
  <link href="/stylesheets/mimic-bootstrap.css" rel="stylesheet">
</head>
<body>
  <nav class="text-white bg-dark">Navigation Bar Here</nav>
  <main>
    <article class="text-white bg-dark">
      <h1>Highlighted Article title 1</h1>
      <p>Summary and link.</p> 
    </article>
    <div class="row g-5 grid-67-33">
      <div class="col-md-8">
        <article>
          <h3>Highlighted Article title 2</h3>
          <p class="text-muted">Author and date</p>
          <p>Summary and link.</p> 
        </article>
        <article>
          <h3>Highlighted Article title 3</h3>
          <p class="text-muted">Author and date</p>
          <p>Summary and link.</p> 
        </article>
        <article>
          <h3>Article title N</h3>
          <p class="text-muted">Author and date</p>
          <p>Summary and link.</p> 
        </article>
      </div>
      <div class="col-md-4">
        <aside class="bg-light">
          <h4>About</h4>
          <p>About you, your business, and/or your blog content focus.</p>
          <p>Lorem ipsum...</p>
          <address>email: me@example.com</address>
        </aside>
      </div>
    </div>
  </main>
  <footer class="bg-light">Footer Here</footer>
  <!-- COMMENT OUT THE BOOTSTRAP JAVASCRIPT CDN -->
</body>
</html>

Do the same for the article-template file.
  • In the wrapping div element, add classes "row g-5 grid-75-25". These classes will create two columns: 
    • one for the article content that will take up 75% of the screen width, 
    • and one for the Table of Contents that will take up 25% of the screen width.

articles/article-template.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="INSERT ARTICLE DESCRIPTION HERE (158 Chars max)">
  <meta name="author" content="YOUR NAME HERE (optional)">
  <title>ARTICLE TITLE HERE</title>
  <!-- COMMENT OUT THE BOOTSTRAP STYLESHEET CDN -->
  <link href="/stylesheets/mimic-bootstrap.css" rel="stylesheet">
</head>
<body>
  <nav class="text-white bg-dark">Navigation Bar Here</nav>
  <article>
    <header class="bg-light">
      <h1>Article Title</h1>
      <p>Author, date, article introduction.</p> 
    </header>
    <div class="row g-5 grid-75-25">
      <main class="col-md-9">
        <h2 id="topic-1">Article Topic 1</h2>
        <p>Put your topic summary here.</p>
        <h3 id="subtopic-1a">Subtopic 1A</h3>
        <p>Put your subtopic text here.</p>
        <h3 id="subtopic-1b">Subtopic 1B</h3>
        <p>Put your next subtopic text here.</p>
        <hr>
        <h2 id="elements">HTML Element Examples</h2>
        <p>Below are common HTML elements to use in articles.</p>
        
        <h3 id="elements-image">Images</h3>
        <figure>
          <img src="/images/placeholder-x.png" alt="placeholder">
          <figcaption>Image Caption</figcaption>
        </figure>
      </main>
      <nav class="bg-light col-md-3 ">
        <h5>Table of Contents (sidebar)</h4>
        <ul>
          <li>Link to heading id "topic-1"</li>
          <li>Link to heading id "subtopic-1a"</li>
          <li>Link to heading id "subtopic-1b"</li>
        </ul>
      </nav>
    </div>
  </article>
  <footer class="bg-light">Footer Here</footer>
  <!-- COMMENT OUT THE BOOTSTRAP JAVASCRIPT CDN -->
</body>
</html>

Now let's define the classes in our stylesheet:

stylesheets/mimic-bootstrap.html
/* -- GRID -- */
.row { display: grid; }
.grid-67-33 { grid-template-columns: 2fr 1fr; }
.grid-75-25 { grid-template-columns: 3fr 1fr; }
.g-5 { grid-gap: 3rem; gap: 3rem; }

View the pages:
  • Save changes to these three files.
  • Go back to the browser to the web page at http://127.0.0.1:5500.
  • Make sure the screen is at least 768 pixels wide.
  • Refresh it. There should still be two columns.
  • View the article-template page: http://127.0.0.1:5500/articles/article-template.html

CSS Grid properties

Below is a simplified version of the index.html grid elements. For convenience I added IDs to the relevant elements.
<div id="grid-parent" class="row grid-67-33 g-5">
  <div id="col-1">ARTICLE SUMMARIES GO HERE</div>
  <div id="col-2">ABOUT SECTION GOES HERE</div>
</div>

  • Parent element: The columns are wrapped in a parent element. In this case it is the div with id "grid-parent. The grid classes are applied to the parent element. These classes can be any name, and can be combined.
  • Column elements: Each child element is a separate column. We have to, div#col-1 and div#col-2.

Grid CSS properties: Apply three CSS properties to the parent element
  1. grid
  2. grid-template-columns
  3. grid-gap

Grid property:
  • .row { display: grid; } 
  • The parent element's display property must be set to grid.
    • In our Blog Site, the div's row class sets the display property: 

Grid-template-columns property:
  • .grid-67-33 { grid-template-columns: 2fr 1fr; } 
  • The grid-template-columns property sets the number of columns and their width . We can use different units of measurement.

Units of measurement:
We want to create two columns where the first column is 2/3 of the screen and the second column is 1/3.
  • Pixels: grid-template-columns: 800px 400px; creates 2 columns with the given pixel width.
  • Percent of Screen: grid-template-columns: 67% 33%; creates 2 columns with the given percent width.
  • Fraction of remaining screen: grid-template-columns: 2fr 1fr creates 2 columns. This divides the screen width into 3 fractions (adding 2fr + 1fr).  The first child element takes up 2/3 fraction of the screen width, and the second child element takes up 1/3 fraction.
    • We are using the fraction of remaining screen because it automatically adjusts for column gaps:

Gap / grid-gap Properties:
  • .g-5 { grid-gap: 3rem; gap: 3rem; }
  • The gap property sets the space between grid columns and rows.
    • column-gap property sets space between grid columns but not rows.
    • row-gap property sets space between grid rows but not columns.
  • The grid-gap property was renamed to gap. We will set both properties in case the user has an old browser.

Open CheatSheet Back To List Next Tutorial