CheatSheet
日本語 icon日本語English iconEnglish
チートシートとはカンニングペーパーのことです。それが転じて、本来覚えることをまとめておいたものです。
要点をすぐに参照できるようにまとめてみました。

CSS Grid

エンジニアのためのWebチートシート

CSS Grid Layoutは、CSSの強力な2次元レイアウトシステムです。 行と列の両方を同時に制御でき、複雑なレイアウトを簡単に実現できます。 Flexboxと組み合わせることで、モダンなWebレイアウトを効率的に構築できます。

CSS Gridの基本

CSS Gridを指定しない

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
1
2
3
4

CSS Gridを指定する

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
1
2
3
4

grid-template-columns / rows

grid-template-columns

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
}
1
2
3
4
5
6

grid-template-rows

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50px 100px;
}
1
2
3
4
5
6

gap

gap

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
1
2
3
4
5
6

row-gap / column-gap

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 8px;
  column-gap: 24px;
}
1
2
3
4
5
6

justify-items / align-items

justify-items: start

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: start;
}
1
2
3

justify-items: center

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
}
1
2
3

justify-items: end

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: end;
}
1
2
3

align-items: start

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  height: 150px;
}
1
2

align-items: center

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 150px;
}
1
2

align-items: end

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  height: 150px;
}
1
2

justify-content / align-content

justify-content: space-between

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: space-between;
}
1
2
3

justify-content: space-around

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: space-around;
}
1
2
3

justify-content: space-evenly

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: space-evenly;
}
1
2
3

align-content: space-between

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: space-between;
  height: 150px;
}
1
2
3
4

grid-template-areas

grid-template-areas

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  gap: 8px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
Header
Sidebar
Main
Aside
Footer

fr / minmax / repeat

fr

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
1fr
2fr
1fr

minmax()

.container {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 2fr;
}
min 60px
2fr

repeat()

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
1
2
3
4

auto-fit

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
1
2
3

子要素に指定するプロパティ

grid-column

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item1 {
  grid-column: 1 / 3;
}
1
2
3
4
5

grid-row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item1 {
  grid-row: 1 / 3;
}
1
2
3
4
5

justify-self

.item1 { justify-self: start; }
.item2 { justify-self: center; }
.item3 { justify-self: end; }
.item4 { justify-self: stretch; }
start
center
end
stretch

align-self

.item1 { align-self: start; }
.item2 { align-self: center; }
.item3 { align-self: end; }
.item4 { align-self: stretch; }
start
center
end
stretch