Grid Template Areas

css-grid practice

by allen Yu

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/shunnien/css-grid25day/master/assets/style.css">
<div class="container">
  <div class="item item1">
    <p>I'm Sidebar #1</p>
  </div>
  <div class="item item2">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.</p>
    <p>Lorem ipsum d</p>
  </div>
  <div class="item item3">
    <p>I'm Sidebar #2</p>
  </div>
  <div class="item footer">
    <p>I'm the footer</p>
  </div>
</div>
<hr>
<div class="container2">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
  <div class="item item11">11</div>
  <div class="item item12">12</div>
  <div class="item item13">13</div>
  <div class="item item14">14</div>
  <div class="item item15">15</div>
  <div class="item item16">16</div>
  <div class="item item17">17</div>
  <div class="item item18">18</div>
  <div class="item item19">19</div>
  <div class="item item20">20</div>
  <div class="item item21">21</div>
  <div class="item item22">22</div>
  <div class="item item23">23</div>
  <div class="item item24">24</div>
  <div class="item item25">25</div>
  <div class="item item26">26</div>
  <div class="item item27">27</div>
  <div class="item item28">28</div>
  <div class="item item29">29</div>
  <div class="item item30">30</div>
</div>

CSS

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 10fr 1fr;
  grid-template-rows: 150px 150px 100px;
  grid-template-areas: "siderbar-1  content  siderbar-2" "siderbar-1  content  siderbar-2" "footer      footer   footer"
}

.footer {
  grid-area: footer;
}

.container>.item1 {
  grid-area: siderbar-1;
}

.container>.item2 {
  grid-area: content;
}

.container>.item3 {
  grid-area: siderbar-2;
}

@media (max-width: 700px) {
  .container {
    grid-template-areas: "content  content  content" "siderbar-1  siderbar-1  siderbar-2" "footer      footer   footer"
  }
}

/* 以下是範例二 */

.container2 {
  display: grid;
  grid-gap: 20px;
  grid-template-areas: "💩 💩 💩 💩 🍔 🍔 🍔 🍔" "💩 💩 💩 💩 🍔 🍔 🍔 🍔" "💩 💩 💩 💩 🍔 🍔 🍔 🍔" "💩 💩 💩 💩 🍔 🍔 🍔 🍔"
}

.container2>.item3 {
  grid-column: 💩-start / 🍔-end;
  grid-row-end: 💩-end;
}