Basic CSS Grid Layout

basic-css-grid-layout.markdown

Basic CSS Grid Layout

CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する｜Webクリエイターボックス http://www.webcreatorbox.com/tech/css-grid-layout/

A Pen by Mana on CodePen.

License.

index.html

<div class="container">
  <div class="item box-big1">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item box-big2">F</div>
  <div class="item box-big3">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">J</div>
  <div class="item box-big4">K</div>
</div>

style.css

.container {
  display: grid;
  gap: 10px;
  grid-template-columns: 1.5fr 1fr 1fr 3fr;
  grid-template-rows: 180px 100px 80px 120px auto;
}
.item {
  background: #ddd;
  padding: 10px;
  border-radius: 8px;
  border: 3px solid #ccc;
}
.box-big1 {
  grid-column: 1;
  grid-row: 1 / 4;
  background: #fc2;
  border-color: #fa0;
}
.box-big2 {
  grid-column: 3 / 5;
  background: #0bd;
  border-color: #09c;
}
.box-big3 {
  grid-column: 2 / 4;
  grid-row: 3 / 5;
  background: #c6c;
  border-color: #a4a;
}
.box-big4 {
  grid-column: 1 / 5;
  background: #0ba;
  border-color: #098;
}

/* Responsive */
@media (max-width: 600px){
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .box-big1,
  .box-big2,
  .box-big3,
  .box-big4 {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Layout */
body {
  padding: 10px;
  font-family: sans-serif;
}