CSS Grid Starter Layouts

0
0

This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects.

Remember that browser support for Grid is good but requires fallbacks for legacy browsers. That means a straight up copy and paste of these may not be well suited for some use cases.

Holy Grail Layout

The ol’ classic three-column layout where two sidebars and a container holding the body copy is sandwiched between a full-width header and footer.

Flexible Holy Grail

Everything stays intact as the viewport width changes using a fluid content container.

HTML

<div class="grid">
  <header>
    Header
  </header>

  <aside class="sidebar-left">
    Left Sidebar
  </aside>

  <article>
    Article
  </article>

  <aside class="sidebar-right">
    Right Sidebar
  </aside>
  
  <footer>
    Footer
  </footer>
</div>

CSS
.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-template-rows: repeat(3, 100px);
  grid-gap: 1em;
}

header,
aside,
article,
footer {
  background: #eaeaea;
  padding: 1em;
}

header, footer {
  grid-column: 1 / 4;
}

/* Demo Specific Styles */
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

.grid > * {
  display: flex;
  align-items: center;
  justify-content: center;
}


Responsive Holy Grail

Things get stacked up once the viewport gets narrow.

HTML

<div class="grid">
  <header>
    Header
  </header>

  <aside class="sidebar-left">
    Left Sidebar
  </aside>

  <article>
    Article
  </article>

  <aside class="sidebar-right">
    Right Sidebar
  </aside>
  
  <footer>
    Footer
  </footer>
</div>

CSS
.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-gap: 1em;
}

header, footer {
  grid-column: 1 / 4;
}

@media all and (max-width: 700px) {
  aside,
  article {
    grid-column: 1 / 4;
  }
}

/* Demo Specific Styles */
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

header,
aside,
article,
footer {
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25vh;
}

2-Columns with Header and Footer

A classic blog layout where one column is for the post and the other for a sidebar.

Flexible 2-Columns

The layout gets squishy when the viewport becomes narrow but the layout stays in place.

HTML
<header>
  Header
</header>
<main>
  Main
</main>
<aside>
  Sidebar
</aside>
<footer>
  Footer
</footer>

CSS
body {
  display: grid;
  grid-template-columns: 75% 25%;
  grid-template-rows: 10vw 30vw 10vw;
  grid-gap: 1em;
}

header,
footer {
  grid-column: 1 / span 2;
}

/* Demo Specific Styles */
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

header,
main,
aside,
footer {
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
}


Responsive 2-Columns

Things get stacked up on smaller screens.

HTML

<header>
  Header
</header>
<main>
  Main
</main>
<aside>
  Sidebar
</aside>
<footer>
  Footer
</footer>

CSS

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 10vw 30vw 10vw;
  grid-gap: 1em;
}

header,
footer {
  grid-column: 1 / span 5;
}

main {
  grid-column: 1 / span 3;
}

aside {
  grid-column: span 2;
}

@media (max-width: 700px) {
  
  main,
  aside {
    grid-column: 1 / span 5;
  }
  
}

/* Demo Specific Styles */
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

header,
main,
aside,
footer {
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
}

header,
footer {
  height: 10vw;;
}

Evenly Distributed, Fit as Needed

Elements flow into the layout and end when there are no more.

HTML
<div class="grid">
  
  <div class="module">1</div>
  <div class="module">2</div>
  <div class="module">3</div>
  <div class="module">4</div>
  <div class="module">5</div>
  <div class="module">6</div>
  <div class="module">7</div>
  <div class="module">8</div>
  <div class="module">9</div>
  <div class="module">10</div>
  <div class="module">11</div>
  <div class="module">12</div>
  <div class="module">13</div>
  <div class="module">14</div>
  <div class="module">15</div>
</div>
CSS
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

.grid {
  /* Grid Fallback */
  display: flex;
  flex-wrap: wrap;
  
  /* Supports Grid */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 1em;
}

.module {
  /* Demo-Specific Styles */
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  
  /* Flex Fallback */
  margin-left: 5px;
  margin-right: 5px;
  flex: 1 1 200px;
}

/* If Grid is supported, remove the margin we set for the fallback */
@supports (display: grid) {
  .module {
    margin: 0;
  }
}


Article with Breakout

A great little trick by Tyler Sticka that allows an element to break out of the grid. Rachel Andrew provides a thorough explanation about how named grid lines allow this to work.

HTML

<article>
  <section>
    <h1>Article Title</h1>
    <p>Sed autem necessitatibus quibusdam rerum suscipit aspernatur. Aut voluptatem animi rerum vero et et. Explicabo vel pariatur dolorem voluptas blanditiis quia magni eos. Ab temporibus nam tempora.</p>
    <p>Pariatur consequatur blanditiis voluptatem. Error in esse temporibus quia. Perferendis molestiae velit deleniti deserunt. Provident qui ullam adipisci optio. Molestias similique et deserunt sint molestias autem non autem. Nemo itaque repellat assumenda nostrum qui eos porro dolorum.</p>
  </section>
  <figure>
    <img src="http://via.placeholder.com/1500x450?text=Image">
  </figure>
  <section>
    <p>Ea a assumenda rerum. Omnis ut voluptatem asperiores eius omnis laborum et. Pariatur et eos expedita eos sint modi est ut. Rerum molestiae magni quasi dolorum consequatur harum molestiae. Aut sunomnis atque deserunt molestiae. Repellendus aut unde impedit fugiat quia qui.</p>
    <p>Saepe voluptas officia corporis sed. Consequatur nam aperiam enim necessitatibus non doloribus quis ullam. Qui aut quisquam voluptatem neque quidem harum.</p>
    <p>Sed autem necessitatibus quibusdam rerum suscipit aspernatur. Aut voluptatem animi rerum vero et et. Explicabo vel pariatur dolorem voluptas blanditiis quia magni eos. Ab temporibus nam tempora.</p>
    <p>Pariatur consequatur blanditiis voluptatem. Error in esse temporibus quia. Perferendis molestiae velit deleniti deserunt. Provident qui ullam adipisci optio. Molestias similique et deserunt sint molestias autem non autem. Nemo itaque repellat assumenda nostrum qui eos porro dolorum.</p>
  </section>
</article>

CSS

article {
  display: grid;
  grid-template-columns: 
    [full-start] minmax(1em, 1fr) 
    [main-start] minmax(0, 56em) [main-end]
    minmax(1em, 1fr) [full-end];
  grid-gap: 1em;
}

section {
  grid-column: main;
}

figure {
  grid-column: full;
}

/* Demo Specific Styles */
body {
  padding: 2em 0;
}

article > * {
  background-color: #eaeaea;
  padding: 2em;
}

figure {
  text-align: center;
}

img {
  max-width: 100%;
}

JS
// Source: https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/

// Further exaplanation: https://www.rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/

Basic Calendar

As you might expect, CSS Grid works well for a calendar grid.

HTML
<div class="calendar">
  <header>
    <h1>November 2017</h1>
  </header>

  <ul class="weekdays">
    <li>
      <abbr title="S">Sunday</abbr>
    </li>
    <li>
      <abbr title="M">Monday</abbr>
    </li>
    <li>
      <abbr title="T">Tuesday</abbr>
    </li>
    <li>
      <abbr title="W">Wednesday</abbr>
    </li>
    <li>
      <abbr title="T">Thursday</abbr>
    </li>
    <li>
      <abbr title="F">Friday</abbr>
    </li>
    <li>
      <abbr title="S">Saturday</abbr>
    </li>
  </ul>

  <ul class="day-grid">
    <li class="month=prev">29</li>
    <li class="month=prev">30</li>
    <li class="month=prev">31</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li class="month-next">1</li>
    <li class="month-next">2</li>
  </ul>
    
</div>

CSS
header {
  display: flex;
  align-items: center;
  font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
  justify-content: center;
  margin-bottom: 2em;
  background: #000;
  color: #fff;
  min-height: 10vh;
  text-align: center;
}

ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1em;
  margin: 0 auto;
  max-width: 64em;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin-left: 0;
  font-size: calc(16px + (21 - 16) * ((100vw - 300px) / (1600 - 300)));
}

ul.weekdays {
  margin-bottom: 1em;
}

ul.weekdays li {
  height: 4vw;
}

ul.day-grid li {
  background-color: #eaeaea;
  border: 1px solid #eaeaea;
  height: 12vw;
  max-height: 125px;
}

ul.weekdays abbr[title] {
  border: none;
  font-weight: 800;
  text-decoration: none;
}

ul.day-grid li:nth-child(1),
ul.day-grid li:nth-child(2),
ul.day-grid li:nth-child(3),
ul.day-grid li:nth-child(34),
ul.day-grid li:nth-child(35) {
  background-color: #fff;
}

@media all and (max-width: 800px) {
  ul {
    grid-gap: .25em;
  }
  
  ul.weekdays li {
    font-size: 0;
  }
  
  ul.weekdays > li abbr:after {
      content: attr(title);
      font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
    text-align: center;
    }
}


Monopoly Board

A simple recreation of the game board. Jen Simmons has a sweet demo complete with Monpoly styles.

HTML
<div class="board">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
  <div class="square">4</div>
  <div class="square">5</div>
  <div class="square">6</div>
  <div class="square">7</div>
  <div class="square">8</div>
  <div class="square">9</div>
  <div class="square">10</div>
  <div class="square">11</div>
  <div class="square">12</div>
  <div class="square">13</div>
  <div class="square">14</div>
  <div class="square">15</div>
  <div class="square">16</div>
</div>

CSS
.board {
  display: grid;
  justify-content: center;
  align-content: center;
  grid-gap: 1rem;
  grid-template-columns: repeat(5, 10vw);
  grid-template-rows: repeat(5, 10vw);
}

.square:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

.square:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}

.square:nth-child(3) {
  grid-row: 1;
  grid-column: 3;
}

.square:nth-child(4) {
  grid-row: 1;
  grid-column: 4;
}

.square:nth-child(5) {
  grid-row: 1;
  grid-column: 5;
}

.square:nth-child(6) {
  grid-row: 2;
  grid-column: 5;
}

.square:nth-child(7) {
  grid-row: 3;
  grid-column: 5;
}

.square:nth-child(8) {
  grid-row: 4;
  grid-column: 5;
}

.square:nth-child(9) {
  grid-row: 5;
  grid-column: 5;
}

.square:nth-child(10) {
  grid-row: 5;
  grid-column: 4;
}

.square:nth-child(11) {
  grid-row: 5;
  grid-column: 3;
}

.square:nth-child(12) {
  grid-row: 5;
  grid-column: 2;
}

.square:nth-child(13) {
  grid-row: 5;
  grid-column: 1;
}

.square:nth-child(14) {
  grid-row: 4;
  gr
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.