この翻訳は不完全です。英語から この記事を翻訳 してください。
CSS グリッドレイアウト は二次元グリッドシステムをCSSにもたらします。ページの中での主要な領域や、小さなユーザーインタフェース要素を、グリッドによってレイアウトすることができます。この記事ではCSSグリッドレイアウトやその第一仕様の一部について紹介します。この記事で紹介する以下の項目は、一連のガイドでより詳細な説明を行います。
グリッドとは何か？
グリッドは、水平の線と垂直の線が交差した集合であり、行と列を表します。行と列については、グリッド要素上に配置することができます。CSSグリッドレイアウトは以下の特徴を持ちます。
固定的でかつ変動的なトラックサイズ
例えばpxを用いて、固定的かつ変動的なトラックサイズのグリッドを作成することができます。%やあるいはグリッドのために制定された fr 単位のような柔軟なサイズによっても、グリッドを作成することができます。
Item placement
You can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid. Grid also contains an algorithm to control the placement of items not given an explicit position on the grid.
Creation of additional tracks to hold content
You can define an explicit grid with grid layout but the specification also deals with content added outside of a declared grid, adding additional rows and columns as needed. Features such as adding “as many columns as will fit into a container” are included.
Alignment control
Grid contains alignment features in order that we can control how items align once placed into a grid area, and how the entire grid is aligned.
Control of overlapping content
More than one item can be placed into a grid cell, or areas can partially overlap each other. This layering may then be controlled with z-index.
Grid is a powerful specification and when combined with other parts of CSS such as flexbox, can help you to create layouts that were previously impossible to build in CSS. It all starts by creating a grid on your grid container.
グリッドコンテナ
要素に対して、display: grid か display: inline-grid を指定することで、グリッドコンテナを作成することができます。 グリッドコンテナを作成すると、全ての直接の子要素がグリッド要素へと変わります。
この例では、wrapperクラスを持つdivが親要素としてあり、内部には5つの子要素が含まれます。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
.wrapper をグリッドコンテナ化します。
.wrapper {
display: grid;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
全ての直接の子要素は今やグリッド要素となりました。それぞれの要素がグリッド要素になる以前と比べて、webブラウザ上では見た目の変化は無いでしょう。というのは、グリッドは要素に対して１つの行を作成したからです。開発者ツールの一部として利用可能なグリッドインスペクタを搭載しているFireboxの開発者版が、現時点では役に立つかもしれません。この例をFirefoxで表示して、グリッドをインスペクトすると、グリッド値の隣に小さなアイコンが見えるでしょう。これをクリックすると、その要素のグリッドがブラウザ上でオーバーレイされます。
CSSグリッドレイアウトについて学び、使っていく中で、このツールはグリッドを可視化することで更なる理解の助けになるでしょう。
この例をよりグリッドらしくするためには、列を追加する必要があります。
グリッドトラック
グリッド上の列と行はgrid-template-columns と grid-template-rows を使って定義します。 これあｒはグリッドトラックを規定します。グリッドトラックはグリッド上の2つのラインの間にある空間です。以下の画像では、トラックがハイライトされているのが見えるかと思います。グリッド上の1列目です。
先述の例に対してgrid-template-columnsプロパティを付け加えますと、 行トラック数の定義となります。
今、200px幅の3つの行トラックを持つグリッドを定義しました。子要素はグリッドセルに１つずつ配置されます。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
fr単位
長さのいかなる単位によってでもトラックを定義することができます。柔軟なグリッドトラックを作成できるように、グリッドでは長さの新たな単位が導入されました。 新しいfr単位は、グリッドコンテナ内での利用可能な空間を表します。次のグリッド定義では、利用可能な空間に応じて伸び縮みする３つの等幅なトラックを作成します。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
次の例では、1つの2frトラックと、2つの1frトラックを作成します。利用可能な空間は4つに分割されます。そのうちの2つが最初のトラックに、残りは2つのトラックにそれぞれ与えられます。
.wrapper {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
最後の例では、絶対サイズのトラックをfrと混合させています。最初のトラックが500pxなので、この固定幅が利用可能な空間から取り去られます。残った空間が3つに分割されて、比率に応じて2つの変動幅のトラックに割り当てられます。
.wrapper {
display: grid;
grid-template-columns: 500px 1fr 2fr;
}
repeat( )記法によるトラック作成
多くのトラックを持つ大きなグリッドは、repeat()記法を使うことで全てかあるいは一部のトラックを繰り返して作成することができます。例えば、以下のグリッド定義は、
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
以下の用に書くこともできます。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
繰り返し記法は一部のトラックを作成する際にも使えます。次の例では最初のトラックが20pxで、以降の6つが1frのトラック、そして最後のトラックが20pxであるようなグリッドを作成しました。
.wrapper {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
}
繰り返し記法はトラックの並びを受け取るので、トラックの繰り返しパターンを作成するのに利用できます。次の例では、1frのトラックと2frのトラックを5回繰り返した10個のトラックからグリッドが構成されるようになります。
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr 2fr);
}
The implicit and explicit grid
When creating our example grid we defined our column tracks with the grid-template-columns property, but let grid create rows as needed for the content. These rows are created in the implicit grid. The explicit grid consists of the rows and columns you define with grid-template-columns and grid-template-rows. If you place something outside of that defined grid, or due to the amount of content more grid tracks are needed, then grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, so will size based on the content inside them.
You can also define a set size for tracks created in the implicit grid with the grid-auto-rows and grid-auto-columns properties.
In the below example we use grid-auto-rows to ensure that tracks created in the implicit grid are 200 pixels tall.
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
Track sizing and minmax()
When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but ensure they expand to fit any content that is added. For example, I may want my rows to never collapse smaller than 100 pixels, but if my content stretches to 300 pixels in height I would like the row to stretch to that height.
Grid has a solution for this with the minmax() function. In this next example I am using minmax() in the value of grid-auto-rows. Automatically created rows will be a minimum of 100 pixels tall, and a maximum of auto. Using auto means that the size will look at the content size and so stretch to give space for the tallest thing in a cell in this row.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
<div class="wrapper"> <div>One</div> <div>Two <p>I have some more content in.</p> <p>This makes me taller than 100 pixels.</p> </div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
Grid Lines
It should be noted that when we define a grid we define the grid tracks, not the lines. Grid then gives us numbered lines to use when positioning items. In our three column, two row grid we have four column lines.
Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will look at how to do this in a later guide in this series.
Positioning items against lines
We will be exploring line based placement in full detail in a later article, the following example demonstrates doing this in a simple way. When placing an item we target the line – rather than the track.
In the following example I am placing the first two items on our three column track grid, using the grid-column-start, grid-column-end, grid-row-start and grid-row-end properties. Working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far right line on the grid. It begins at row line 1 and ends at row line 3, therefore spanning two row tracks.
The second item starts on grid column line 1, and spans one track. This is the default so I do not need to specify the end line. It also spans two row tracks from row line 3 to row line 5. The other items will place themselves into empty spaces on the grid.
<div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> </div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box2 {
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 5;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
Don't forget that you can use the Grid Inspector in Firefox Developer Tools to see how the items are positioned against the lines of the grid.
Grid Cells
A grid cell is the smallest unit on a grid, conceptually it is like a table cell. As we saw in our earlier examples, once a grid is defined on a parent the child items will lay themselves out once in each cell of the defined grid. In the below image I have highlighted the first cell of the grid.
Grid areas
Items can span one or more cells both by row or by column, and this creates a grid area. Grid areas have to be rectangular – it isn’t possible to create an L-shaped area for example. The highlighted grid area spans two row and two column tracks.
Gutters
Gutters or alleys between grid cells can be created using the grid-column-gap and grid-row-gap properties, or the shorthand grid-gap. In the below example I am creating a 10-pixel gap between columns and a 1em gap between rows.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 1em;
}
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
Any space used by gaps will be accounted for before space is assigned to flexible length fr tracks, and gaps act for sizing purposes like a regular grid track, however you cannot place anything into a gap. In terms of line-based positioning, the gap acts like a fat line.
Nesting grids
A grid item can become a grid container. In the following example I have the three-column grid created earlier, with our two positioned items. In this case the first item has some sub-items. As these items are not direct children of the grid they do not participate in grid layout and so display in normal document flow.
<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>
If I set box1 to display: grid I can give it a track definition and it too will become a grid, the items then lay out on this new grid.
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.box {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
In this case the nested grid has no relationship to the parent. As you can see in the example it has not inherited the grid-gap of the parent and the lines in the nested grid do not align to the lines in the parent grid.
Subgrid
In the level 1 grid specification there is a feature called subgrid which would let us create nested grids that use the track definition of the parent grid.
Subgrids are not yet implemented in any browsers, and the specification is subject to change.
In the current specification, we would edit the above nested grid example to use display: subgrid rather than display: grid, then remove the track definition. The nested grid will use the parent grid tracks to lay out items.
It should be noted that the nested grid is in both dimensions—rows and columns. There is no concept of the implicit grid working with subgrids. This means you need to ensure that the parent grid has enough row and column tracks for all the subitems.
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display: subgrid;
}
Layering items with z-index
Grid items can occupy the same cell. If we return to our example with items positioned by line number, we can change this to make two items overlap.
<div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> <div class="box box4">Four</div> <div class="box box5">Five</div> </div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.box {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
The item box2 is now overlapping box1, it displays on top as it comes later in the source order.
Controlling the order
We can control the order in which items stack up by using the z-index property - just as with positioned items. If we give box2 a lower z-index than box1 it will display below box1 in the stack.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
z-index: 2;
}
.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
z-index: 1;
}
<div class="wrapper">
<div class="box box1">One</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.box {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
Next Steps
In this article we have had a very quick look through the Grid Layout Specification. Have a play with the code examples, and then move onto the next part of this guide where we will really start to dig into the detail of CSS Grid Layout.