CIS 195 - Web Authoring 1

CIS195 Web Authoring 1: HTML

Using the CSS Grid for Layout

Weeks 1-5 Weeks 6-11
1. Intro to HTML 6. Layout with CSS
2. More HTML, file paths 7. CSS Flexbox and Grid
3. Site structure and navigation 8. HTML Forms
4. Formatting with CSS 9. Multimedia
5. Midterm, Project Propposal 10. Tables, Project Completion
  11. Final

[Topics by Week for the Ten-Week Term]

Contents

[TOC]

Q and A

Grid Container Elements

The CSS grid is used to position elements on a page.

For example, this HTML code:

<div style="display: grid; grid-template-columns: auto auto auto;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>  
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>  
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>  
</div>

Will be displayed like this on the web page:

Item 1 Item 2 Item 3

Item 4 Item 5 Item 6

Item 7 Item 8 Item 9

Note that the three auto values in grid-template-columns: auto auto auto are what specify the three columns and that their width is automatically determined.

Grid Rows and Columns

Example:

<!-- in an embedded style sheet -->
  .container {
    display: grid; 
    grid-template-columns: 200px 200px 200px; 
    grid-template-rows: 50px 50px;
  }

<!-- in the body -->
<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>  
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>  
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>  
</div>

Grid Lines and Gaps

A gap is like a combination of padding and margin in the CSS box model; it’s just the space between rows or columns.

An element can be made to span multiple columns using the column lines as a reference; for example:

  .item2 {
    grid-column-start: 2;
    grid-column-end: 4;
  }

An element can be made to span multiple rows using the row lines as a reference; for example:

  .item3 {
    grid-row-start: 2;
    grid-row-end: 4;
  }

We can apply these CSS rules like this:

<div style="display: grid; grid-template-columns: auto auto auto;">
  <div>Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>  
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>  
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>  
</div>

Which will look like this on the web page:

Item 1 Item 2

Item 3 Item 4 Item 5

​ Item 6 Item 7

Item 8 Item 9

Grid Template Areas

The grid-template-areas property in CSS is used to position structural elements within a grid layout. Each element to be positioned must be given a grid-area name. The grid-template-areas property is then used to arrange the named elements into rows and columns like this:

<style>
    .container {
      display: grid;
      grid-template-areas:
        'header header header'
        'menu main sidebar'
        'section section sidebar'
        'footer footer footer';
    }
</style>

<div class="container">
    <header style="grid-area: header;">header</header>
    <nav style="grid-area: menu;">menu</nav>
    <main style="grid-area: main;">main</main>
    <section style="grid-area: section;">section</section>
    <aside style="grid-area: sidebar;">sidebar</aside>
    <footer style="grid-area: footer;">footer</footer>
  </div>

In this example, the div is a grid container that contains a grid with six areas that are specified by the grid-template-areas CSS property. The grid items are placed in the grid container using the grid-area CSS property. The grid items are not placed in the grid container in the order they appear in the HTML. Their order is determined by the order of area names in the grid-template-areas CSS property.

Each grid-area name should only be applied to one element. Note that the grid-template-areas names don’t need to match the element names.

Example Code

Open the example web page in your browser and use the View Source feature to look at the source code.

CSS Grid Examples

Reference

CSS Grid Tutorial by W3schools

CSS Grid in The CSS Handbook by Flavio Copes

Grids in MDN Web Docs

Creative Commons License Web Authoring Lecture Notes, written by Brian Bird in , are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

  1. The CSS2 property grid-gap, is now deprecated and replaced by the CSS3 property gap. ↩

This site is open source. Improve this page.