😇

CSSのGrid layoutを学んでみた

2022/05/10に公開

CSS

grid

tech

Gird layoutとは?

MDN公式

グリッドとは何か？
グリッドは、列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。 CSS グリッドレイアウトには次のような特徴があります。

こちらのYouTube動画がわかりやすいです。本屋さんに行ったら売ってるHTML、CSSの本を書いている人の動画でした🤩

書きながら勉強していく

縦３列に横並びになる

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

style.css

.container {
  display: grid;
  grid-template-columns: 120px 120px 120px; /*縦３つに並べる*/
}

.item {
  background: #0bd;
  color: #fff;
  padding: 10px;
}

間を開ける
style.css

.container {
  display: grid;
  grid-template-columns: 120px 120px 120px; /*縦３つに並べる*/
  gap: 10px; /*グリッドアイテム同士の余白*/
}

.item {
  background: #0bd;
  color: #fff;
  padding: 10px;
}

親要素の割合を使う場合
style.css

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /*親要素の割合を使って1対1で表示*/
  gap: 10px; /*グリッドアイテム同士の余白*/
  border: 1px solid;
}

.item {
  background: #0bd;
  color: #fff;
  padding: 10px;
}

グリッドアイテムの高さを設定

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /*親要素の割合を使って1対1で表示*/
  grid-template-rows: 200px 200px; /* 2列なのでスペース200px */
  gap: 10px; /*グリッドアイテム同士の余白*/
}

.item {
  background: #0bd;
  color: #fff;
  padding: 10px;
}

グリッドアイテムを繰り返し並べる
これができると短縮してかける

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*repeat関数を使用*/
  grid-template-rows: repeat(2, 200px); /*repeat関数を使用*/
  gap: 10px; /*グリッドアイテム同士の余白*/
}

.item {
  background: #0bd;
  color: #fff;
  padding: 10px;
}

使ってみた感想

現代では必須の知識らしくレスポンシブ対応をしやすいみたいです。レスポンシブまだ分かってないので、勉強中です。FlexBOXは少し分かった😅

YouTubeのWebクリエイターさんのBlogでレスポンシブのやり方を紹介されていたので、リンクを貼っておきます。写経するより、すでに書かれているCSSを参考にした方がいいですね。

Gird layoutとは?

使ってみた感想

Discussion