• このエントリーをはてなブックマークに追加

シンプルなgrid

display:grid;としてみる。親要素に、display:grid;と指定するとgridレイアウトになる。それだけだと、リストやブロックのような表示のまま・縦表示で特にグリッド感が見られない。

HTML

<div class="grid-1">
<div class="grid-1-1">grid-1-1</div>
<div class="grid-1-2">grid-1-2</div>
</div>

CSS

.grid-1{
	display: grid;
}
.grid-1 .grid-1-1{
	color: rgba(255,255,255,1);
	background: rgba(100,70,30,1);
}
.grid-1 .grid-1-2{
	color: rgba(255,255,255,1);
	background: rgba(150,120,0,1);
}

grid デモ

gridで横並び

display:grid;として、横並びに10rem、20remと指定してみる。remはルート(<html>タグ)の文字サイズを基準に指定する。

HTML

<div class="grid-2">
<div class="grid-2-1">grid-2-1</div>
<div class="grid-2-2">grid-2-2</div>
</div>

CSS

.grid-2{
	display: grid;
	grid-template-columns: 10rem 20rem;
}
.grid-2 .grid-2-1{
	color: rgba(255,255,255,1);
	background: rgba(70,100,30,1);
}
.grid-2 .grid-2-2{
	color: rgba(255,255,255,1);
	background: rgba(70,190,60,1);
}

gridで横並び デモ

gridで縦横2個ずつ:4つ並べてみる(横にしか並ばない)

display:grid;として、横並びに10rem、20remと指定してみる。さらに行を一つ増やして、2×2にしてみる。

単純に子要素を増やしただけでは、うまく折り返してくれない。

HTML

<div class="grid-3">
<div class="grid-3-1">grid-3-1</div>
<div class="grid-3-2">grid-3-2</div>
<div class="grid-3-3">grid-3-3</div>
<div class="grid-3-4">grid-3-4</div>
</div>

CSS

.grid-3{
	display: grid;
	grid-template-columns: 10rem 20rem 10rem 20rem;
}
.grid-3 .grid-3-1{
	color: rgba(255,255,255,1);
	background: rgba(10,60,150,1);
}
.grid-3 .grid-3-2{
	color: rgba(255,255,255,1);
	background: rgba(70,120,210,1);
}
.grid-3 .grid-3-3{
	color: rgba(255,255,255,1);
	background: rgba(10,60,150,1);
}
.grid-3 .grid-3-4{
	color: rgba(255,255,255,1);
	background: rgba(70,120,210,1);
}

gridで縦横2個ずつ:4つ並べてみる(横にしか並ばない)

gridで縦横2個ずつ:4つ並べてみる

うまく2×2とするためにはどうすればいいか?

単純に子要素を増やしただけでは、うまく折り返してくれない。実は横の並びを4つ指定しなければ2×2となる。

HTML

<div class="grid-4">
<div class="grid-4-1">grid-4-1</div>
<div class="grid-4-2">grid-4-2</div>
<div class="grid-4-3">grid-4-3</div>
<div class="grid-4-4">grid-4-4</div>
</div>

CSS

.grid-4{
	display: grid;
	grid-template-columns: 10rem 20rem;
}
.grid-4 .grid-4-1{
	color: rgba(255,255,255,1);
	background: rgba(50,50,50,1);
}
.grid-4 .grid-4-2{
	color: rgba(255,255,255,1);
	background: rgba(120,120,120,1);
}
.grid-4 .grid-4-3{
	color: rgba(255,255,255,1);
	background: rgba(50,50,50,1);
}
.grid-4 .grid-4-4{
	color: rgba(255,255,255,1);
	background: rgba(120,120,120,1);
}

gridで縦横2個ずつ:4つ並べてみる

gridで縦横3×3表示

2×2が可能になったら、3×3も可能に。

HTML

<div class="grid-5">
<div class="grid-5-1">grid-5-1</div>
<div class="grid-5-2">grid-5-2</div>
<div class="grid-5-3">grid-5-3</div>
<div class="grid-5-4">grid-5-4</div>
<div class="grid-5-5">grid-5-5</div>
<div class="grid-5-6">grid-5-6</div>
<div class="grid-5-7">grid-5-7</div>
<div class="grid-5-8">grid-5-8</div>
<div class="grid-5-9">grid-5-9</div>
</div>

CSS

.grid-5{
	display: grid;
	grid-template-columns: 10rem 10rem 10rem;
}
.grid-5 .grid-5-1,
.grid-5 .grid-5-3,
.grid-5 .grid-5-5,
.grid-5 .grid-5-7,
.grid-5 .grid-5-9{
	color: rgba(255,255,255,1);
	background: rgba(255,60,60,1);
}
.grid-5 .grid-5-2,
.grid-5 .grid-5-4,
.grid-5 .grid-5-6,
.grid-5 .grid-5-8{
	color: rgba(255,255,255,1);
	background: rgba(200,30,30,1);
}

gridで縦横3×3表示

gridでヘッダー・2カラム・フッター

ヘッダー・フッターと中央部分は左右にレイアウト。gridは中央部分だけに指定すれば良い。ヘッダー・フッターは通常のblockで良い。<div>は、デフォルトのdisplayはblock。

.grid-6-centerに指定する値で、calc(100% – 10rem)と指定していますが、これは.grid-6-center幅いっぱいのときは100%:1000pxなら1000pxから10rem分引いた残りの幅ということになる。固定値で指定すると、ブラウザの表示サイズを変更したときに、右側が空いてしまったり、ヘッダー・フッターの横幅を超えて表示されてしまう。

HTML

<div class="grid-6">
<div class="grid-6-header">grid-6-header</div>
<div class="grid-6-center">
	<div class="grid-6-1">grid-6-1</div>
	<div class="grid-6-2">grid-6-2</div>
</div>
<div class="grid-6-footer">grid-6-footer</div>
</div>

CSS

.grid-6 .grid-6-header{
	color: rgba(255,255,255,1);
	background: rgba(60,100,100,1);
}
.grid-6 .grid-6-center{
	display: grid;
	grid-template-columns: 10rem calc(100% - 10rem);
}
.grid-6 .grid-6-1{
	color: rgba(255,255,255,1);
	background: rgba(150,150,150,1);
}
.grid-6 .grid-6-2{
	color: rgba(255,255,255,1);
	background: rgba(200,200,200,1);
}
.grid-6 .grid-6-footer{
	color: rgba(255,255,255,1);
	background: rgba(100,100,150,1);
}

gridでヘッダー・2カラム・フッター

gridで縦と横の値を指定して、グリッドらしいレイアウトを行う

ここまでは、gridの横指定のみでレイアウトしてきたが、さらに縦の指定を行う。ここから、グリッドの醍醐味が出てくる。

横方向:横の長さがgrid-7-1が10rem、grid-7-2が20rem、grid-7-3が10rem。

縦方向:縦の長さがgrid-7-1が10rem、grid-7-4が20rem、grid-7-7が10rem。

中央が、横20rem・縦20remとなるので、正方形で大きく表示される。

HTML

<div class="grid-7">
<div class="grid-7-1">grid-7-1</div>
<div class="grid-7-2">grid-7-2</div>
<div class="grid-7-3">grid-7-3</div>
<div class="grid-7-4">grid-7-4</div>
<div class="grid-7-5">grid-7-5</div>
<div class="grid-7-6">grid-7-6</div>
<div class="grid-7-7">grid-7-7</div>
<div class="grid-7-8">grid-7-8</div>
<div class="grid-7-9">grid-7-9</div>
</div>

CSS

.grid-7{
display: grid;
grid-template-columns: 10rem 20rem 10rem;
grid-template-rows: 10rem 20rem 10rem;
}
.grid-7 .grid-7-1,
.grid-7 .grid-7-3,
.grid-7 .grid-7-5,
.grid-7 .grid-7-7,
.grid-7 .grid-7-9{
color: rgba(255,255,255,1);
background: rgba(150,150,150,1);
}
.grid-7 .grid-7-2,
.grid-7 .grid-7-4,
.grid-7 .grid-7-6,
.grid-7 .grid-7-8{
color: rgba(255,255,255,1);
background: rgba(200,200,200,1);
}

gridで縦横3×3表示

10×10のグリッド

配色はすごいことなっていますが、グリッドでごちゃごちゃと。

HTML

<div class="sample-grid">
<div class="grid header">header</div>
<div class="grid sub1">sub1
<ul>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
<ul>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</div>
<div class="grid main">
<h1>メイン</h1>
<p>ううううううううううううううううううううううううううううううううううううううううううううう</p>
<p>ううううううううううううううううううううううううううううううううううううううううううううう</p>
<p>ううううううううううううううううううううううううううううううううううううううううううううう</p>
<p>ううううううううううううううううううううううううううううううううううううううううううううう</p>
</div>
<div class="grid sub2-1">
sub2-1
</div>
<div class="grid sub2-2">
sub2-2
</div>
<div class="grid sub2-3">
sub2-3
</div>
<div class="grid sub2-4">
sub2-4
</div>
<div class="grid main-foot1">
main-foot1
</div>
<div class="grid main-foot2">
main-foot2
</div>
<div class="grid main-foot3">
main-foot3
</div>
<div class="grid main-foot4">
main-foot4
</div>
<div class="grid main-foot5">
main-foot5
</div>
<div class="grid main-foot6">
main-foot6
</div>
<div class="grid copyright">copyright</div>
</div>

CSS

.sample-grid{
display: grid;
grid-template-columns:2fr 6fr 2fr;
grid-template-rows:2fr 6fr 2fr;
color: rgba(255,255,255,1)
}
.sample-grid a{
color: rgba(255,255,255,1);
}
.sample-grid .grid{
}
.sample-grid .header{
grid-column: 1/10;
grid-row: 1/1;

padding: 2vw;
background: rgba(255,0,0,1);
}
.sample-grid .sub1{
grid-column: 1/2;
grid-row: 2/10;

padding: 2vw;
background: rgba(200,150,0,1);
}
.sample-grid .main{
grid-column: 2/8;
grid-row: 2/4;

padding: 2vw;
background: rgba(180,180,0,1);
}
.sample-grid .sub2-1{
grid-column: 8/10;
grid-row: 2/3;

padding: 2vw;
background: rgba(100,150,0,1);
}
.sample-grid .sub2-2{
grid-column: 8/10;
grid-row: 3/4;

padding: 2vw;
background: rgba(50,150,50,1);
}
.sample-grid .sub2-3{
grid-column: 8/10;
grid-row: 4/6;

padding: 2vw;
background: rgba(50,100,30,1);
}
.sample-grid .sub2-4{
grid-column: 8/10;
grid-row: 6/10;

padding: 2vw;
background: rgba(30,80,20,1);
}
.sample-grid .main-foot1{
grid-column: 2/4;
grid-row: 4/9;

padding: 2vw;
background: rgba(0,200,200,1);
}
.sample-grid .main-foot2{
grid-column: 4/8;
grid-row: 4/9;

padding: 2vw;
background: rgba(0,100,255,1);
}
.sample-grid .main-foot3{
grid-column: 2/3;
grid-row: 9/10;

padding: 2vw;
background: rgba(255,100,255,1);
}
.sample-grid .main-foot4{
grid-column: 3/6;
grid-row: 9/9;

padding: 2vw;
background: rgba(255,0,255,1);
}
.sample-grid .main-foot5{
grid-column: 6/7;
grid-row: 9/9;

padding: 2vw;
background: rgba(200,0,200,1);
}
.sample-grid .main-foot6{
grid-column: 7/8;
grid-row: 9/9;

padding: 2vw;
background: rgba(100,0,100,1);
}
.sample-grid .copyright{
grid-column: 1/10;
grid-row: 10/10;

padding: 2vw;
background: rgba(255,0,150,1);
}

10×10のグリッド

まとめ

規則正しくグリッドベースでレイアウトするには大変便利なレイアウト用displayのプロパティ。flexも柔軟に対応できるが、こちらは、規則に沿って決まった幅や高さを指定するのに大変優れている。
単に、gridだけを利用するのもありだが、

10×10のグリッドのサンプル例。