HTML+CSSでgridを使ったレイアウト方法/サンプル・活用方法

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

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);
}