SIRIUS(シリウス）をGridレイアウトで

 

【聖杯レイアウト】

 

CSS　Gridレイアウトに関連したHTML骨格

 

それぞれのパーツの内容（ヘッダー、メニュー、コンテンツ、サブメニュー、フッター）を、
<div class="●●●">　・・・　</div> のタグ
でくくります。
タグでくくられた部分に、それぞれの区画の記載内容が入ります。

 

1. <div class="wrapper">
2. 　<div class="header">
3. 　　（ヘッダーの内容記載）
4. 　</div>
5. 　<div class="left">
6. 　　（メニューの内容記載）
7. 　</div>
8. 　<div class="content">
9. 　　（コンテンツの内容記載）
10. 　</div>
11. 　<div class="right">
12. 　　（サブメニューの内容記載）
13. 　</div>
14. 　<div class="footer">
15. 　　（フッターーの内容記載）
16. 　</div>
17. </div>

 

 

CSS　Gridレイアウトに関連したレイアウト部分のCSS

2. .wrapper {
3. display: grid;
4. grid-template-columns: A% B% C%;
5. grid-template-rows: auto 1fr auto;
6. }
8. .header{
9. grid-row: 1;
10. grid-column-start: 1;
11. grid-column-end: 4;
12. }
13. .content{
14. grid-row-start: 2;
15. grid-row-end: 3;
16. grid-column: 2;
17. }
18. .left{
19. grid-row: 2;
20. grid-column: 1;
21. }
22. .right{
23. grid-row: 2;
24. grid-column: 3;
25. }
26. .footer{
27. grid-row: 3;
28. grid-column-start: 1;
29. grid-column-end: 4;
30. }

2. .wrapper {
3. display: grid;
4. grid-template-columns: A% B% C%;
5. grid-template-rows: auto 1fr auto;
6. }

 

wrapper のエリアに対して、display: grid;の記載で、CSS Grid レイアウトでレイアウトされることを表します。

 

grid-template-columns: A% B% C%;
列は、左からその幅を、A% B% C% にします。

 

grid-template-rows: auto 1fr auto;
行は、上から２番目をコンテンツに合わせ、あとは自動調節します。

 

例としてヘッダーの場合
.header{
grid-row: 1;
　　行では、ヘッダーは rowライン①～② になるので、スタートとなるように、grid-row は１とします。
grid-column-start: 1;
grid-column-end: 4;
　　列では、ヘッダーは columnライン❶～❹ になるのですが、複数の列にまたがるので、start と end を記載します。
}