[CSS] Grid

15235 ワード
CSS テキストリンク

grid


gridはcontainer(親要素)とitem(子要素)からなる.
<!DOCTYPE html>
<html lang="en">
<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>Grid layout</title>
    <link rel="stylesheet" href="./style.css" />
</head>
<body>
    <div class="container">
        <div class="item">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">F</div>
    </div>
</body>
</html>

1. display: grid


コンテナに表示:grid;を選択して開始
.container {
  display: grid;
/* gird | inline-grid */
}
ただしgridを追加しても何の変化もありません.
inline gridはinline blockと同様に、コンテンツに応じてスペースを占有します.
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
グリッドは、行と列を定義する場合にのみ有効になります.

2. grid-template-columns

  • grid-template-columnsプロパティは、カラムの数と幅を指定します.
  • のデフォルト値はnoneで、カラムは作成されません.
  • 属性値の個数=列の個数、各属性値=列幅
    • .container {
  display: grid;
  grid-template-columns: 150px 50% auto;
/* 속성값이 150px, 50%, auto 일 경우 3열이 만들어지고
  1열의 너비는 150px, 2열의 너비는 50%, 3열의 너비는 나머지공간 */
}
  • fr単位は比率を表す.
    • .container {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
/* 속성값이 1fr 2fr 3fr 이면 1:2:3의 비율로 3열이 만들어진다. */
}

    3. grid-template-rows

  • grid-template-rowsプロパティは、行の高さを決定します.
  • 第1の値は第1の行の高さであり、第2の値は第2の行の高さである.
  • 行の高さが指定されていない場合は、コンテンツの高さに合わせられます.
    • .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50px 100px;
}

    👩‍💻 注意)行数が指定されていない可変の場合はgrid-auto-rowsを使用します.

    4. repeat

  • repeatは、重複する値を容易に入れることができる.
    • .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* 1fr을 3번 반복 = 1fr 1fr 1fr */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr 2fr);
}
/* 1fr 2fr 을 3번 반복 = 1fr 2fr 1fr 2fr 1fr 2fr */

    5. grid-gap


    ① grid-row-gap

  • 列間の間隔
    • .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-column-gap: 30px;
}

    ② grid-column-gap

  • 行の間隔
    • .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-row-gap: 30px;
}

    ③ grid-gap

  • 行と列の間隔
  • 第1の値は行間隔、第2の値は列間隔
    • を表す.
    .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 30px;
/* grid-gap의 값이 하나이면 열과 행 모두 적용 된다. */
}

    ---追加---
    How to center an image?
    [白準1003]フィボナッチ関数Python