<table>
   <tbody><tr>
      <td colspan="3" style="height: 100px;" bgcolor="#1c75bc"><h1>My Website</h1></td>
   </tr>
   <tr>
      <td colspan="3" valign="middle" height="30" bgcolor="#8ebade"><a href="#">Home</a></td>
   </tr>
   <tr>
      <td width="25%" valign="top" bgcolor="#8bd3d8">
         <a href="#">Menu link</a><br>
         <a href="#">Menu link</a><br>
      </td>
      <td width="55%" valign="top" bgcolor="#e8f6f7">
         <h2>Page heading</h2>
         Lorum Ipsum pair.<br>
         Lorum ipsum
      </td>
      <td width="20%" valign="top" bgcolor="#8bd3d8"> </td>
   </tr>
   <tr>
      <td colspan="3" align="center" height="20" bgcolor="#16a6b1">Copyright ©</td>
   </tr>
</tbody></table>

My Website
Home
Menu link Menu link	Page heading Lorum Ipsum pair. Lorum ipsum
Copyright ©

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" align="center">
   <tbody><tr><td valign="top" align="center">
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
         <tbody><tr><td valign="top" align="center">
            <table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
               <tbody><tr><td valign="top">
                  <table width="100%" cellspacing="0" cellpadding="0" border="0">
                     <tbody><tr><td valign="top">
                        <table width="100%" cellspacing="0" cellpadding="0" border="0">
                           <tbody><tr><td valign="top" align="center">
                              <table cellspacing="0" cellpadding="0" border="0" align="center">
                                 <tbody><tr><td valign="top" align="center">
                                    <table width="100"><tbody><tr><td valign="top" align="center">
                                       <table cellspacing="0" cellpadding="0" border="0" align="center">
                                          <tbody><tr><td valign="top" align="center">
                                             <table>
                                                <tbody><tr><td valign="top">
                                                   <a href=""><img src="image.png"></a>
                                                </td></tr></tbody>
                                             </table>
                                          </td></tr></tbody>
                                       </table>
                                    </td></tr></tbody></table>
                                 </td></tr></tbody>
                              </table>
                           </td></tr></tbody>
                        </table>
                     </td></tr></tbody>
                  </table>
               </td></tr></tbody>
            </table>
         </td></tr></tbody>
      </table>
   </td></tr></tbody>
</table>

<header>
   <h1>My Website</h1>
</header>
<nav>
   <a href="#">Home</a>
</nav>
<main>
   <aside><nav>
      <a href="#">Menu link</a><br>
      <a href="#">Menu link</a><br>
   </nav></aside>
   <article>
      <h2>Page heading</h2>
      Lorum Ipsum pair. <br>
      Lorum ipsum
   </article>
</main>
<footer>Copyright ©</footer>

Page heading

Lorum Ipsum pair.
Lorum ipsum

						header {
   height: 100px;
   padding: 10px;
}
nav {
   clear: both;
   height: 25px;
   padding: 15px;
}
main {
   clear: both;
   overflow: hidden;
}
aside {
   float: left;
   padding: 10px;
}
article {
   float: left;
   padding: 10px;
   width: 55%;
}
footer {
   clear: both;
   height: 20px;
}

Page heading

Lorum Ipsum pair.
Lorum ipsum

						.parent {
   clear: both;
   overflow: hidden;
}

.child {
   float: left;
   width: 100%;
   
   @media (min-width: 500px) {
      margin-right: 2%;
      width: 49%;

      &:nth-child(2n) {
         margin-right: 0;
      }

      &:nth-child(2n + 1) {
         clear: both;
      }
   }

						   @media (min-width: 800px) {
      clear: none !important;
      margin-right: 1% !important;
      width: 32.6666667%;

      &:nth-child(3n) {
         margin-right: 0 !important;
      }

      &:nth-child(3n + 1) {
         clear: both !important;
      }
   }
}

- Your had to clearfix everything
- There were a bunch more container divs being used to keep floating elements together
- And when using media queries you often had to do complex calculations and change or reset the previous code
- Oh, and there was a LOT of using

!important

- So by the time we'd memorised how many % wide each element needed to be in a 6 column grid with a 1% margin

						<header>
   <h1>My Website</h1>
</header>
<nav><a href="#">Home</a></nav>
<main>
   <aside><nav>
      <a href="#">Menu link</a><br>
      <a href="#">Menu link</a><br>
   </nav></aside>
   <article>
      <h2>Page heading</h2>
      Lorum ipsum	pair. <br>
      Lorum ipsum
   </article>
</main>
<footer>Copyright ©</footer>

Page heading

Lorum ipsum pair.
Lorum ipsum

						header {
   height: 100px;
}
nav {
   display: flex;
      align-items: center;
   height: 30px;
   padding: 10px;
}
main {
   display: flex;
}
aside {
   width: 20%;
   nav {
      flex-wrap: wrap;
   }
}
article {
   padding: 10px;
   width: 55%;
}
footer {
   height: 20px;
   padding: 10px;
   text-align: center;
}

Page heading

Lorum ipsum pair.
Lorum ipsum

.parent {
   display: flex;
   width: 102%;
   margin: -1%;
}

.child {
   flex: 1 1 auto;
   margin: 1%;
}

<header>
   <h1>My Website</h1>
</header>
<nav><a href="#">Home</a></nav>
<aside><nav>
   <a href="#">Menu link</a><br>
   <a href="#">Menu link</a><br>
</nav></aside>
<main>
   <h2>Page heading</h2>
   Lorum ipsum	pair. <br>
   Lorum ipsum
</main>
<footer>Copyright ©</footer>

Page heading

Lorum ipsum pair.
Lorum ipsum

body {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
}

header {
   grid-column: 1 / -1;
}

nav {
   grid-column: 1 / -1;
}

main {
   grid-column: span 3;
}

footer {
   grid-column: 1 / -1;
}

Page heading

Lorum ipsum pair.
Lorum ipsum

<table>
   <tbody><tr>
      <td colspan="3" style="height: 100px;" bgcolor="#1c75bc"><h1>My Website</h1></td>
   </tr>
   <tr>
      <td colspan="3" valign="middle" height="30" bgcolor="#8ebade"><a href="#">Home</a></td>
   </tr>
   <tr>
      <td width="20%" valign="top" bgcolor="#8bd3d8">
         <a href="#">Menu link</a><br>
         <a href="#">Menu link</a><br>
      </td>
      <td width="55%" valign="top" bgcolor="#e8f6f7">
         <h2>Page heading</h2>
         Lorum Ipsum
         pair. <br>
         Lorum ipsum
      </td>
      <td width="25%" valign="top" bgcolor="#8bd3d8"> </td>
   </tr>
   <tr>
      <td colspan="3" align="center" height="20" bgcolor="#16a6b1">Copyright ©</td>
   </tr>
</tbody></table>

body {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
}

header {
   grid-column: 1 / -1;
}

nav {
   grid-column: 1 / -1;
}

main {
   grid-column: span 3;
}

footer {
   grid-column: 1 / -1;
}

<header>
   <h1><a href="/">My Notebook</a></h1>
</header>
<nav>
   <a href="/note-1/">Note 1</a>
   <a href="/note-2/">Note 2</a>
</nav>
<main>
   <article>
      <header><h1>Note 1</h1></header>
      <main>
         <p>There is a note written here...</p>
      </main>
   </article>
   <aside>
      <h3>Created On</h3>
      <time datetime="26 Dec 2018">26 Dec 2018</time>
   </aside>
</main>
<footer>
   <nav>
      <a href="/help">Help</a>
   </nav>
</footer>

body {
   display: grid;
}

body {
   display: grid;
}

body {
   display: grid;
   grid-template-columns: 200px 200px 200px 200px 200px;
}

body {
   display: grid;
   grid-template-columns: repeat(5, 200px);
}

repeat(number of times, size)

repeat(3, 200px)

200px 200px 200px

repeat(2, 10px 20vw)

10px 20vw 10px 20vw

body {
   display: grid;
   grid-template-columns: repeat(5, 20%);
}

body {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
}

grid-template-columns: 100px 1fr 50px 2fr;
grid-gap: 20px;

100% element width 510px - existing content - 150px - gap - 60px ÷ number of frs ÷ 3

/*grid-template-columns: 100px 1fr 50px 2fr;*/
grid-template-columns: 100px 100px 50px 200px;
grid-gap: 20px;

body {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
}

body {
   grid-template-columns: repeat(5, 1fr);
}

body {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: 100px 1fr 50px;
}

body {
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: 100px 1fr 50px;
}

header {
   grid-column-start: 1;
}

header {
   grid-column-start: 1;
   grid-column-end: -1;
}

header {
   /*grid-column-start: 1;
   grid-column-end: -1;*/
   grid-column: 1 / -1
}

header {
   grid-column: 1 / -1
}

header {
   grid-column: 1 / -1;
}

nav {
   grid-row: 2 / -1;
}

nav {
   /* grid-row: 2 / -1; */
   grid-row: span 2;
}

nav {
   grid-row: span 2;
}

main {
   grid-column: span 4;
}

main {
   grid-column: span 4;
}

footer {
   grid-column: span 4;
}

footer {
   grid-column: span 4;
}

body {
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: 100px 1fr 20px;
   grid-template-areas:
     'header header header header header'
     'nav    note   note   note   note'
     'nav    footer footer footer footer';
}

header {
   grid-area: header;
}

nav {
   grid-area: nav;
}

main {
   grid-area: note;
}

footer {
   grid-area: footer;
}

main {
   display: contents;
}

<main>
   <article>
      <header>
         <h1>Note Title</h1>
         <time datetime="30 Jan 2019">30 Jan 2019</time>
      </header>
      <main>
         <p>Note Content</p>
      </main>
   </article>
   <aside>
      <p>Note Sidebar</p>
   </aside>
</main>

<!-- <main> -->
   <article>
      <header>
         <h1>Note Title</h1>
         <time datetime="30 Jan 2019">30 Jan 2019</time>
      </header>
      <main>
         <p>Note Content</p>
      </main>
   </article>
   <aside>
      <p>Note Sidebar</p>
   </aside>
<!-- </main> -->

main {
   grid-area: note;
   display: contents;
}

main {
   grid-area: note;
   display: contents;
}

body {
   grid-template-areas:
     'header header header header header'
     'nav    note   note   note   sidebar'
     'nav    footer footer footer footer';
}

article {
   grid-area: note;
}

aside {
   grid-area: sidebar;
}

<!-- <main> -->
   <article>
      <header>
         <h1>Note Title</h1>
         <time datetime="30 Jan 2019">30 Jan 2019</time>
      </header>
      <main>
         <p>Note Content</p>
      </main>
   </article>
   <aside>
      <p>Note Sidebar</p>
   </aside>
<!-- </main> -->

<!-- <main>
   <article>
      <header>
         <h1>Note Title</h1>
         <time datetime="30 Jan 2019">30 Jan 2019</time>
      </header>
      <main>
         <p>Note Content</p>
      </main>
   </article>
   <aside>
      <p>Note Sidebar</p>
   </aside>
</main> -->

body {
   grid-template-areas:
      'header header header header header'
      'nav    note   note   note   note'
      'nav    footer footer footer footer';
}

main {
   grid-area: note;
   /*display: contents;*/
   display: grid;
}

main {
   grid-area: note;
   display: grid;
}

main {
   display: grid;
   grid-template-columns: subgrid;
}

main {
   grid-template-columns: subgrid;
}

article {
   grid-column: span 3;
}

article {
   grid-column: span 3;
}

footer nav {
   display: flex;
   justify-content: space-between;
}

footer nav {
   display: flex;
   justify-content: space-between;
}

grid-parent {
   justify-items: stretch;
   align-items: stretch;
}

grid-child {
   justify-self: stretch;
   align-self: stretch;
}

footer {
   justify-self: start;
}

footer {
   justify-self: start;
}

footer {
   justify-self: start;
   width: 300px;
}

footer {
   justify-self: start;
   width: 300px;
}

main {
  grid-template-columns: repeat(10, 300px);
}

main {
  grid-template-columns: repeat(auto-fill, 300px);
}

repeat(auto-fill, 100px)

auto-fill / auto-fit

repeat(auto-fill, 100px)

main {
   grid-template-columns: repeat(auto-fill, 300px);
}

main {
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

minmax(100px, 20vw)

minmax(100px, 1fr)

minmax(1fr, 300px)

main {
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

main {
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

main {
   grid-template-rows: repeat(auto-fill, 150px);
}

main {
   grid-template-rows: repeat(auto-fill, 150px);
}

main {
   grid-column-gap: 20px;
}

main {
   grid-column-gap: 20px;
   grid-row-gap: 20px;
}

main {
   /*grid-column-gap: 20px;
   grid-row-gap: 20px;*/
   grid-gap: 20px;
}

.parent {
   margin: -10px;
}

.child {
   margin: 10px;
}

.child {
   margin: 10px;
}
.child:nth-child(5n) {
   margin-right: 0;
}
.child:nth-child(5n+1) {
   margin-left: 0;
}
.child:nth-child(-n+6) {
   margin-top: 0;
}

main {
   grid-gap: 20px;
}

@supports

@supports(css-property: value) {
   /*Insert code here*/
}

@supports(display: grid) {
   /*Code here*/
}

@supports(grid-template-areas: '.') {
   /*Code here*/
}

@supports(grid-template-areas: '.') {
   main {
      display: grid;
   }
}