CSS note

とりあえず、慣れてみる

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

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

新着記事