CSS Grid
ICS

()

ics.media@tonkotsuboy_com

CSS Grid
1. CSS Grid
2. CSS Grid3.
4. 2018
5.
6.

IE 11
CSS GridoatFlexbox

Flexbox

justify-content: space-aroundex-start calc()

<div class="container"><header>header</header><div class="middle"><aside>aside</aside><main>main</main><nav>nav</nav></div><footer>footer</footer></div>CSS GridCSS Grid

(row)

(row)
(column)(column)(column)HTML<div class="container"><header>header</header><aside>aside</aside><table><tr><main>main</main><td><h2>今⽇のうに</h2><nav>nav</nav><img src="" alt="">
</td>
</tr>
<footer>footer</footer></table></div>CSS Grid
Qiita
https://qiita.com/GridCSS Grid
Beauti
http://beauti .net/

FlashGrid<table>(HTML)
oatinline-box
1oat

FlexboxGrid

CSS Grid

Grid

ChromeFirefox

Safari

Edge

Internet
Explorer

69

62

1217

11

はSafari(iOS )

Chrome(Android )

1269

2018

CSS Grid
26%
47%

21%
oat Flexbox
26%

173

/ Google2

Flexbox
CSS Grid

CSS Grid
1. CSS Grid
2. CSS Grid3.
4. 20185.
6.

IE 11CSS GridCSS GridCSS Grid
1.

2.

3.

display: grid

grid-templategrid-area

HTML<section class="container"><div class="visual">（メインビジュアル）</div><div class="number">（数字）</div><div class="expression">（テキスト）</div><div class="other">（３枚の写真）</div></section>

1.

1.

.container {display: grid;}

2.

(row)

(row)
(column)(column)(column)

2-1.

1fr

220px
40%

120px

1fr

fr

1fr

1fr

fr

1fr

1fr

2-2.

visualnumberexpression

visualotherother2-3. grid-template.container {grid-template:"visual number expression" 1fr"visual other other"
220px /40%120px 1fr;}

2-3. grid-template.container {grid-template:"visual number expression" 1fr"visual other other"
220px /40%
120px 1fr;}

Chrome DevTools Firefox3.

3-1. grid-area.visual {grid-area: visual;}visualnumbervisualother3-2.
.visual {grid-area: visual;}visualvisualnumberother

expression

other.number {grid-area: number;}.expression {grid-area: expression;}.other {grid-area: other;}

4.
800px

2 3

@media (max-width: 800px) {.container {grid-template:"visual visual"
100vw"number expression" 1fr"other other"
auto /120px 1fr}}

CSS Grid
1.

2.

3.

display: grid

grid-templategrid-area

CSS Grid Layout Generator

CSS Grid Layout Generator

by Leniolabs

by @mizchi

https://www.layoutit.com/grid

https://mizchi-sandbox.github.io/grid-generator/

CSS Grid
1. CSS Grid
2. CSS Grid3.
4. 2018
5.
6.

IE 11
CSS Grid-2016
Flash2018

HTML SPA

IE 11
http://henjo.jp/

CSS GridCSS Grid
grid-templategrid-template:"name-label
name" auto
"introduction-label introduction-text" 220px"condition-label
condition-button" auto
"button-list
button-list" auto /120px 1fr;

CSS Grid2

CSS Gridgap
oat Flexbox2
grid-gap
CSS Grid.container {gap: 10px;}

CSS Grid

3

CSS Grid
repat(3,repeat()).container {grid-template-rows: repeat(5, 50px);
grid-template-columns: repeat(2, 50%);}CSS Grid
IE 11iOS 10.2
10.3

CSS Grid
1. CSS Grid
2. CSS Grid3.
4. 2018
5.
6.

IE 11
CSS Grid

IE 11IE
Windows 10Windows 8.1
Windows 7
2018/ IE 11 / 2025 10/ IE 11 / 2023 1/ IE 11 / 2020 1IE 1111%3%

statcounterIE 11 CSS Grid

Autopre er.container {display: grid;
grid-template:"visual number expression" 1fr"visual other other" 220px /40% 120px 1fr;}

.container {display: -ms-grid;display: grid;-ms-grid-rows: 1fr 220px;-ms-grid-columns: 40% 120px 1fr;
grid-template:"visual number expression" 1fr"visual other other" 220px /40% 120px 1fr;}

.visual {grid-area: visual;}.visual {-ms-grid-row: 1;-ms-grid-row-span: 2;-ms-grid-column: 1;
grid-area: visual;}.number {grid-area: number;}.number {-ms-grid-row: 1;-ms-grid-column: 2;
grid-area: number;}.expression {grid-area: expression;}.expression {-ms-grid-row: 1;-ms-grid-column: 3;
grid-area: expression;}.other {grid-area: other;}.other {-ms-grid-row: 2;-ms-grid-column: 2;-ms-grid-column-span: 2;
grid-area: other;
}

2017
2018
Autopre xer IE 11

2017

12

v7.2

grid-template 2017
IE 11.container {grid-template-rows: 1fr 220px;
grid-template-columns: 40% 120px 1fr;}

.main-visual {grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;-ms-grid-row-span: 2;}

Autopre xer IE11
before.container {display: grid;
grid-template:"visual number expression" 1fr"visual other other" 220px /40% 120px 1fr;}
.visual {grid-area: visual;}Autopre xer IE11
after.container {display: -ms-grid;display: grid;-ms-grid-rows: 1fr 220px;-ms-grid-columns: 40% 120px 1fr;
grid-template:"visual number expression" 1fr"visual other other" 220px /40% 120px 1fr;}
.visual {-ms-grid-row: 1;-ms-grid-row-span: 2;-ms-grid-column: 1;
grid-area: visual;
}

gap
2018

6

v8.6

gap

2017

IE 11
gap
margin padding.number,.expression,.other {padding: 10px;}

Autopre xer IE11
before.container {display: grid;
grid-template:"visual number expression" 1fr"visual other other" 220px /40% 120px 1fr;}
.visual {grid-area: visual;}Autopre xer IE11
after.container {/* 中略 */}

gap: 10px;-ms-grid-rows: 1fr 10px 220px;-ms-grid-columns: 40% 10px 120px 10px 1fr;
grid-template:"visual number expression" 1fr"visual otherother"
220px /
40%120px
1fr;.visual {-ms-grid-row: 1;-ms-grid-row-span: 3;-ms-grid-column: 1;
grid-area: visual;}

Autopre xer

webpack 4https://ics.media/entry/17376
CSS
Autopre xer
https://qiita.com/tonkotsuboy_com/items/377913c51b1ac00de e
ParcelSass Autopre xer
https://qiita.com/tonkotsuboy_com/items/2f96263294fad7661a82

Autopre xer CSS online

https://autopre xer.github.io/

CSS Grid
IE 11

IE 11
Autopre xer

IE 11Autopre xer

grid-template×

grid-auto- ow

××

grid-template-areas×

grid-auto-columns
grid-auto-rows

××

gap

×

grid-column
grid-rowcolumn-gap
row-gap×

grid-row-startgrid-column-startalign-self

grid-template-columns
grid-template-rows

grid-row-end
grid-column-end

justify-self×CSS Grid
1. CSS Grid
2. CSS Grid3.
4. 2018
5.
6.

IE 11
CSS Grid

CSS Grid
1.
2.
3.

CSS Grid

grid-auto ow

CSS Grid
1234

5

678

9101112grid-auto ow: column
14710258

1136912

132459678

grid-auto ow: dense
132465789

grid-auto ow

ChromeFirefox

SafariEdgeInternetExplorer

6962

121711×Grid

2018/09/29

Safari(iOS )Chrome(Android )1269

CSS GridCSS Grid

121324

CSS Grid
HTML<div class="container"><h1>大見出し</h1><section><h2>中見出し</h2><p>テキスト1</p><p>テキスト2</p></section><section><h2>中見出し</h2><p>テキスト3</p><p>テキスト4</p></section></div>

CSS.container {grid-template:"header header" auto
"title1 title2" 100px"text1 text3 " 1fr"text2 text4 " 40px /50%50%;}

HTML<div class="container"><h1>大見出し</h1><h2>中見出し</h2><p>テキスト1</p><p>テキスト2</p><h2>中見出し</h2><p>テキスト3</p><p>テキスト4</p></div>

CSS.container {grid-template:"header header" auto
"title1 title2" 100px"text1 text3 " 1fr"text2 text4 " 40px /50%50%;}

display: contents

section {display: contents;}

GridHTMLCSS<div class="container"><h1>大見出し</h1>.container {grid-template:"header header" auto
"title1 title2" 100px"text1 text3 " 1fr"text2 text4 " 40px /50%50%;}<section><h2>中見出し</h2><p>テキスト1</p><p>テキスト2</p></section><section><h2>中見出し</h2><p>テキスト3</p><p>テキスト4</p></section></div>

section {display: contents;}

display: contents

GridChrome

Firefox

SafariEdgeInternetExplorer

69

62

1217

11

はSafari(iOS )

Chrome(Android )1269

は × × は は
2018/09/29

CSS Grid Level 2

CSS Grid Level 2: Here Comes Subgrid

CSS Layout API
JavaScript
CSS Houdini

CSS.box {/* my-layout-logicは、 *//* JavaScriptで定義したレイアウト */}display: layout(my-layout-logic);CSS Grid
1. CSS Grid
2. CSS Grid3.
4. 2018
5.
6.

IE 11
CSS Grid

1.

2

2.
3. IE 11
4.

CSS Grid

CSS GridICS MEDIA Twitter

ics.media@tonkotsuboy_com