<!-- 

  MORE ON GRIDS

  A bit more explanation on things we can do with grids.

-->

<header>

  <h1>More on Grids</h1>

  <p>Just a bit more explanation on how to lay things out in different ways with grids.</p>

</header>

​

​

<section>

  <h2>Spanning multiple columns</h2>

  <p>How to span content across multiple columns. The grid below is set to a three-column structure, take a look at the CSS to see how the 'multiple columns' is working.</p>

  <div class="grid three-column">

    <div class="col span-two-cols">

      <p>Some first content</p>

    </div>

    <div class="col">

      <p>Some second content</p>

    </div>

</section>

<section>

  <h2>Spanning multiple rows</h2>

  <p>How to span content across multiple rows. The grid below is set to a three-column structure, take a look at the CSS to see how the 'multiple rows' is working.</p>

  <p>If there is not enough content for multiple 'rows', the multi-row styling will not apply (as shown below).</p>

  <div class="grid three-column">

    <div class="col span-two-rows">

      <p>Some first content</p>

    </div>

    <div class="col">

      <p>Some second content</p>

    </div>

  </div>

  <p>If there <em>is</em> enough content for multiple rows, the multi-row styling will apply (as shown below).</p>

  <div class="grid three-column">

    <div class="col span-two-rows">

      <p>Some first content</p>

    </div>

    <div class="col">

      <p>Some second content</p>

    </div>

    <div class="col">

      <p>Some third content</p>

    </div>

    <div class="col">

      <p>Some fourth content</p>

    </div>

  </div>

</section>

<section>

  <h2>Sequencing content</h2>

  <p>There are times when reorganizing content can be important. For example you may want an image before a heading visually, but semantically it would be important to have the heading before the image. Grids allow you to specify the sequencing of elements in the structure or target particular columns/rows when needed.</p>

  <p>Reordering content</p>

  <div class="grid three-column">

    <div class="col">

      <p>Some first content</p>

    </div>

    <div class="col">

      <p>Some second content</p>

    </div>

    <div class="col">

      <p>Some third content</p>

    </div>

    <div class="col first">

      <p>Some fourth content, placed first.</p>

    </div>

  </div>

</section>

/* Setting the grid class and some different column structures */

.grid {

  display: grid;

}

​

.grid.three-column {

  grid-template-columns: 1fr 1fr 1fr;

}

​

​

/* Here we are setting up some options for having our columns display differently using additional classes */

​

/* This column will span two-columns in the grid structure */

.col.span-two-cols {

  /* The first value indicates that this element should span over multiple columns, and the second value indicates how many */

  grid-column: span 2; 

}

​

.col.span-two-rows {

  /* The first value indicates that this element should span over multiple rows, and the second value indicates how many. This only comes into effect if multiple rows of content are present. */

  grid-row: span 2;

}

​

​

​

.col.first {

  /* All elements have an order of 0 by default, which means if we use a negative value we can plce that element first in the order */

  order: -1;

}

​

​

​

​

​

​

​

​

/* Some generic styling for columns to make it easier to see what is happening */

.col {

  margin: 0;

  padding: 0.5rem;

  background-color: #DDD;

  border: 1px solid white;

}

​

/* Styling odd columns with a different background color */

.col:nth-of-type(odd) {

  background-color: #CCC;

}

​

.col p {

  margin: 0;

}

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

/* Some styling specifically for these additional explanations */

* {

  box-sizing: border-box;

}

​

body {

  margin: 0 auto;

  padding-bottom: 6rem;

  max-width: 40rem;

  font-family: sans-serif;

}

​

h2 {

  margin-top: 4rem;

}

​

li {

  padding-bottom: 0.5rem;

}

​

figure {

  margin: 6rem 0 0;

}

​

figcaption {

  margin-top: 0.75rem;

  position: relative;

  z-index: 1;

  text-shadow: 0.05rem 0.05rem 0.05rem white;

}

​

​

.further-reading {

  margin-top: 10rem;

  padding-bottom: 2rem;

}

​

​

img {

  height: auto;

  max-width: 100%;

  display: block;

}

​