【CSS】CSS Gridのまとめ
目次
1.display:grid
2.grid-template-columns
3.grid-template-rows
4.grid-column-gap
5.grid-row-gap
6.grid-gap
7.grid-column
8.grid-row
9.justify-self
10.align-self
11.justify-items
12.align-items
13.grid-template-areas
14.grid-area
15.repeat
16.minmax
17.auto-fill
18.auto-fit
ベースのhtmlとcss
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
.item1 {
background:palegreen;
}
.item2 {
background:skyblue;
}
.item3 {
background:pink;
}
.item4 {
background:gold;
}
.item5 {
background:plum;
}
1.display:grid
.container {
display: grid;
}
これでCSS Gridになります。
![](https://3.bp.blogspot.com/-aKFDKfKnay8/XixftJB51BI/AAAAAAAAAnM/fAMPEOob6s8a_UI2VleninHcazQnOeqgQCLcBGAsYHQ/s1600/css-1.png)
2.grid-template-columns
.container {
display: grid;
grid-template-columns: 100px 50px;
}
Gridの列を定義しています。
100pxと50pxの2列が作成されます。
![](https://1.bp.blogspot.com/-md-pkbxsKuQ/XixfwQBKd1I/AAAAAAAAAos/y6-UDhcjR3A-uA7xxF4c8e3AWlEfKTljgCPcBGAYYCw/s1600/css-2.png)
3.grid-template-rows
.container {
display: grid;
grid-template-columns: 100px 50px;
grid-template-rows: 100px 50px 100px;
}
Gridの行を定義しています。
100pxと50pxと100pxの3行が作成されます。
![](https://3.bp.blogspot.com/-oMUnZdLiLrg/Xixfw0PdPaI/AAAAAAAAAo0/oqKSn7rzDD4R88Ma3ZCFtbc5W8lqrhO7QCPcBGAYYCw/s1600/css-3.png)
4.grid-column-gap
.container {
display: grid;
grid-template-columns: 100px 50px;
grid-template-rows: 100px 50px 100px;
grid-column-gap: 10px;
}
Grid列の隙間を定義しています。
![](https://1.bp.blogspot.com/-HgXpQdouY4c/XixfxHonjbI/AAAAAAAAAo0/7HbFJxsdJsUENDcKmShhsxWw810kDkn3QCPcBGAYYCw/s1600/css-4.png)
5.grid-row-gap
.container {
display: grid;
grid-template-columns: 100px 50px;
grid-template-rows: 100px 50px 100px;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
Grid行の隙間を定義しています。
![](https://3.bp.blogspot.com/-KrBd_n5M7bE/XixfxSnH8xI/AAAAAAAAAo0/xWWDvDVRW_YoLYw_x6j66NwKe4WnIpybACPcBGAYYCw/s1600/css-5.png)
6.grid-gap
.container {
display: grid;
grid-template-columns: 100px 50px;
grid-template-rows: 100px 50px 100px;
grid-gap: 10px 20px;
}
Gridの隙間を定義しています。
行に10px、列に20pxの隙間を定義しています。
![](https://4.bp.blogspot.com/-4EDbJKlpWNw/Xixfxsh-JOI/AAAAAAAAAo0/6QekK-ud27ASiLoYoX-WLBd4XD6GPLO4wCPcBGAYYCw/s1600/css-6.png)
7.grid-column
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
.item5 {
background:plum;
grid-column: 1 / 3;
}
![](https://1.bp.blogspot.com/-vkJAfXYduT0/XixfyDLvIpI/AAAAAAAAAo8/469EBobPd7s7eWOvLgppvBTiIOYZiYP2gCPcBGAYYCw/s1600/css-7-1.png)
grid-column: 1 / 3 は1列目から3列目までが対象になります。
![](https://3.bp.blogspot.com/-UFT9hWFOXkA/Xi1Hr4MDOyI/AAAAAAAAApc/U1p_lahjld4Ky6322154F-t-P4H9piEZQCLcBGAsYHQ/s400/css-7-2_1.png)
8.grid-row
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
.item5 {
background:plum;
grid-column: 2 / 4;
grid-row: 2 / 4;
}
![](https://1.bp.blogspot.com/-pQ3KBvVSaRU/XixfykOvjwI/AAAAAAAAAo8/z5DZImDsmgIwA9bpZRjgn8JO-XXGto4PwCPcBGAYYCw/s1600/css-8-1.png)
grid-column: 2 / 4 は2列目から4列目
grid-row: 2 / 4 は2行目から4行目
が対象になります。
![](https://4.bp.blogspot.com/-9znR0tJ5ick/Xi1Jc74WcqI/AAAAAAAAApo/6UhwPI93ca8qDxuJWbe4drHvWnpEt6N2gCLcBGAsYHQ/s1600/css-8-2_1.png)
9.justify-self
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
.item1 {
background:palegreen;
justify-self: start;
}
.item2 {
background:skyblue;
justify-self: center;
}
.item3 {
background:pink;
justify-self: end;
}
列の位置を指定します。
![](https://3.bp.blogspot.com/-v0XlEWYD7Bk/Xixfzmw5fBI/AAAAAAAAAo8/pye_N9Aqyz8CqFpmmZxEvGpSLxMPZj7HwCPcBGAYYCw/s1600/css-9.png)
10.align-self
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
.item1 {
background:palegreen;
align-self: start;
}
.item2 {
background:skyblue;
align-self: center;
}
.item3 {
background:pink;
align-self: end;
}
行の位置を指定します。
![](https://1.bp.blogspot.com/-F4RMJozHAdc/Xi1PWhJQoUI/AAAAAAAAAqM/broqqw1sPVk5WDVyjNutPRZyT7Ofu8HkgCPcBGAYYCw/s1600/css-10.png)
11.justify-items
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
justify-items: center;
}
列の位置を一括で指定します。
![](https://1.bp.blogspot.com/-LNUF-EbML_w/XixftL6EHmI/AAAAAAAAAoo/Fnoqpv7offUVa6s44ktP8C4_dEhZEf6VQCPcBGAYYCw/s1600/css-11.png)
12.align-items
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
align-items: center;
}
行の位置を一括で指定します。
![](https://1.bp.blogspot.com/-b1mayWq_UnY/XixftxXK9LI/AAAAAAAAAow/r4vAZQf3B0sddi6_4-h1qZnSczRxky3fACPcBGAYYCw/s1600/css-12.png)
13.grid-template-areas
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-areas:
"area1 area2 area3"
"area4 area5 area6"
"area7 area8 area9";
}
Gridのセルに名前を付ける事ができます。
14.grid-area
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-areas:
"area1 area2 area3"
"area4 area5 area6"
"area7 area8 area9";
}
.item5 {
background:plum;
grid-area: area8;
}
grid-template-areasで名前を付けた位置に配置できます。
![](https://3.bp.blogspot.com/-5XmSB-w2t7s/XixfuNPWpGI/AAAAAAAAAo4/WxXJBf7QReMIDjn7920f-1zsWTVK27aXQCPcBGAYYCw/s1600/css-13-1.png)
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-areas:
"area1 area2 area3"
"area4 area5 area6"
"area7 area8 area9";
}
.item5 {
background:plum;
grid-area: area2;
}
![](https://4.bp.blogspot.com/-rIj4pNU4fj0/XixfuRBOMNI/AAAAAAAAAow/cQwLmHLTeaYSkwL1ixtjeaU2rFzX9V2swCPcBGAYYCw/s1600/css-13-2.png)
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
.item5 {
background:plum;
grid-area: 1/1/2/4;
}
grid-template-areasで名前を付けていなくても、grid-columnやgrid-rowのように数字で配置する事も可能です。
grid-area: (開始行)/(開始列)/(終了行)/(終了列)となり、上記は「1~2行」と「1~4列」に配置されます。
![](https://4.bp.blogspot.com/-X1cfRzbQrmY/Xixfuo--tdI/AAAAAAAAAo8/Nc4hsFr6YT4045mVM2lqPLnaAiesSwigwCPcBGAYYCw/s1600/css-14.png)
15.repeat
.container {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-columns: repeat(2, 100px 200px);
}
grid-template-columns: 100px 200px 100px 200px;と同じ意味になります。
![](https://3.bp.blogspot.com/-S8zdm_lDKa4/Xixfu9GAhqI/AAAAAAAAAo0/XCZ2ARiQyaMI4dTHTVMcwdCbnW8BbaMlwCPcBGAYYCw/s1600/css-15.png)
16.minmax
.container {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
grid-template-columns: repeat(2, minmax(200px, 300px));
}
minmaxで最小幅と最大幅を指定できます。
17.auto-fill
.container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
スペースがある場合、空のグリッドで挿入し続けます。
![](https://3.bp.blogspot.com/-zj0dqcwBwvc/Xi2SJLhnTOI/AAAAAAAAAqo/SiZ3-R19dbMDA7zOFMiYEZdeTRSWUmD-ACLcBGAsYHQ/s1600/css-17.png)
18.auto-fit
.container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
スペースがある場合、グリッドが引き伸ばされてコンテナのサイズに合わせます。
![](https://4.bp.blogspot.com/-qX7qjpm6QQE/Xi2SDeoguyI/AAAAAAAAAqk/zUJOUmt3jK4AbFWnOCoLGfV7dd1uN82OQCLcBGAsYHQ/s1600/css-18.png)
ディスカッション
コメント一覧
まだ、コメントがありません