CSS - grid-template-areas

トップ > CSSリファレンス > grid-template-areas

概要

属性名 grid-template-areas
none | <string>+
初期値none
適用可能要素グリッドコンテナ
継承継承しない

サポート (説明)

CSSIEEdgeFirefoxChromeOperaSafari
CSS3×1652574410.1

説明

グリッドで区切られた領域に名前をつけます。下記の例では、header, menu, main, footer という名前の領域を定義しています。領域名は grid-area などから参照できます。例えばメイン領域に main という名前を付けた場合、縦方向のグリッド(線)には header-start, header-end、横方向のグリッド(線)にも header-start, headr-end という名前が暗黙的に設定されます。

使用例

CSS
.grid-container {
  display: grid;
  width: 30rem;
  height: 15rem;
  grid-template-areas: "header header"
                       "menu main"
                       "footer footer";
  grid-template-rows: 1.5rem auto 1.5rem;
  grid-template-columns: 6rem auto;
}
.box {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: .1rem;
}
.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }
.footer { grid-area: footer; }
HTML
<div class="grid-container">
  <div class="box header">Header</div>
  <div class="box menu">Menu</div>
  <div class="box main">Main</div>
  <div class="box footer">Footer</div>
</div>
表示
Header
Main

関連項目

リンク


Copyright (C) 2019 杜甫々
初版:2019年12月30日、最終更新:2019年12月30日
http://www.tohoho-web.com/css/prop/grid-template-areas.htm