CSS Grid 帰ってきたテーブルレイアウト

firefox52でつい先日から、display:gridが使えるようになりましたが、引き続きChromeでも使えるようになりそうです。

Chrome 57 Beta: CSS Grid Layout, Improved Add to Home screen, Media Session API

display:gridとは

私も、始めたばかりなので、詳しくは関連リンクなどを見ていただくとして、ざっくりとした印象は以下のようなものです。

HTMLには、テーブル要素というのがありますよね。表ですね。display:tableといったルールとは従来からありましたが、それとは異なり、表の列だとか行をスタイルで指定できるというものです。

Firefoxでみてね + Chrome57でも、サポートが始まったよ

とりあえず、慣れてみる

Raindropテーマの、クラスと組み合わせて何か形にしてみましょう。

Love

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure

💘

HTML

<div class="wrapper">
	<div class="box a">https://youtu.be/wUfsrIh9_BQ</div>
	<div class="box b centered google-font-lobster f40">Love</div>
	<div class="box c centered pad-m">
		<p class="trancate" data-rows="4">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
		</p>
	</div>
	<div class="box d">
	</div>
	<div class="box e centered">
		<a class="ghost rd-alert-bg" href="https://tenman.info/labo/css/">labo/css</a>
	</div>
	<div class="box f centered f40">
		&#128152;
		</p>
	</div>
</div>

CSS

.wrapper {
 display: grid;
 grid-template-columns: 300px 300px 300px;
 grid-template-rows:200px 200px;
 grid-gap: 10px;
 background-color: #fff;
 color: #444;
}
.box {
 background-color: #eee;
 color: #000;
}
.a {
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 2;
}
.b {
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 2;
 grid-row-end: 3;
}
.c {
 grid-column-start: 3;
 grid-column-end: 4;
 grid-row-start: 2;
 grid-row-end: 3;
}
.e {
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 2;
 grid-row-end: 3;
}
.f {
 grid-column-start: 3;
 grid-column-end: 4;
 grid-row-start: 1;
 grid-row-end: 2;
}
.d {
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;
 background:url(https://tenman.info/labo/css/files/snow-644x428.jpg);
 background-size:cover;
}

Raindropsテーマのクラスの解説

それぞれのクラスの説明にリンクしています。

<div class="wrapper">
<div class="box a">https://youtu.be/wUfsrIh9_BQ</div>
<div class="box b centered google-font-lobster f40">Love</div>
<div class="box c centered pad-m">
<p class="trancate" data-rows="4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
</p>
</div>
<div class="box d"></div>
<div class="box e centered">
<a class="ghost rd-alert-bg" href="https://tenman.info/labo/css/">labo/css</a>
</div>
<div class="box f centered f40">
💘
</p>
</div>
</div>

関連リンク

Grid by Example

Eric's Archived Thoughts:

A Complete Guide to Grid | CSS-Tricks

GRID LAYOUT - a Collection by Gabi on CodePen

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

CR Level 1 Property IE10 Implementation Autoprefixer Note
grid-template-columns -ms-grid-columns Yes
grid-template-rows -ms-grid-rows Yes
grid-template-areas - No
grid-template - No Shorthand
grid-auto-columns - No
grid-auto-rows - No
grid-auto-flow - No
grid - No Shorthand
grid-row-start -ms-grid-row Yes
grid-column-start -ms-grid-column Yes
grid-row-end - No Defined by the -ms-grid-row-span property
grid-column-end - No Defined by the -ms-grid-column-span property
grid-row - Yes (only for start value) Shorthand for setting start and end values together
grid-column - Yes (only for start value) Shorthand for setting start and end values together
grid-area - No
grid-row-gap - No Gap properties can be faked by using a regular track.
grid-column-gap - No
grid-gap - No
- -ms-grid-column-span - Not required due to changes to spec
- -ms-grid-row-span - Not required due to changes to spec
align-self -ms-grid-column-align Yes Now part of Box Alignment
justify-self -ms-grid-row-align No Now part of Box Alignment

関連

CSS3 box example


新着記事

コメントは受け付けていません。