grid – 1x2x3

CSSについて説明します。

display: gridについて説明します。

display: grid

gridは、コンテンツを行と列にレイアウトします。

sample 1

サンプルで確認します。

test_004.css

div.test-004-001
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 7ex 7ex 7ex;
    gap: 1rem;
}

div.test-004-001 div
{
    border-radius: 0.5rem;
    background-color: #2060FF88;
}

test_004.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_004.css"/></head>
<body>

<div class="test-004-001">

<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>

</div>

</body>

表示は下記となります。

sample 2

test_004.css

div.test-004-002
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 7ex 7ex 7ex;
    gap: 1rem;
}

div.test-004-002 div
{
    background-color: #2060FF88;
}

test_004.html

<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_004.css"/></head>
<body>

<div class="test-004-002">

<div></div>
<div></div>

<div></div>
<div></div>

<div></div>
<div></div>

</div>

</body>

表示は下記となります。

CSS

div
{
    display: block;
    display: grid;
}

div
{
    display: block grid;
}

div
{
    display: grid;
}

上記はすべて同じ設定となります。

参考

CSS Grid Layout Module Level 1

上記ホームページの下記がわかりやすいと思います。

CSS Grid Layout Module Level 2

CSS Display Module Level 3

<display-inside>

<display-legacy>

参考 & 広告

Kindle版です。

紙の本と、PDF版があります。

Kindle版です。

電子書籍です。