[CSS Grid] グリッドレイアウトを使ってみる

CSS Gridを推奨されたので、試してみたい。

– コンテナ
display: grid; または display: inline-grid;を使うことでGrid Layoutのコンテナになる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> -->
    <style>
        .grid-container {
            display:grid;
            grid-template-rows: 100px 50px;
            grid-template-columns: 150px 1fr;  /* frは残りの幅 */
        }
        #itemA {
            grid-row: 1 / 3;
            grid-column: 1 / 2;
            background: #f88;
        }
        #itemB {
            grid-row: 1 / 3;
            grid-column: 2 / 3;
            background: #8f8;
        }
        #itemC {
            grid-row: 2 / 3;
            grid-column: 2 / 3;
            background: #88f;
        }
         
    </style>
</head>
<body>
    <div class="grid-container">
        <div id="itemA">A</div>
        <div id="itemB">B</div>
        <div id="itemC">C</div>
    </div>
    <script>
    </script>
</body>
</html>

概念はわかった。次行こう。