Grid
display:gridとは？
2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能
格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能
コンテナに指定
display:grid コンテナに指定する事でアイタムがグリッド状に配置が可能
grid-template-columns: 列のトラックの幅を半角スペースで区切って指定
grid-template-rows: 行のトラックの高さを半角スペースで区切って指定
grid-template-areas: ダブルコーデーションで囲い、1行毎のエリア名を指定(アイテムは※1を指定、記述の無い場合は※2を指定)
アイテムに指定※1
grid-area:エリア名を指定
アイテムに指定※2
grid-row: 表示エリアの開始行ライン数/表示エリアの終了行ライン数;
grid-column: 表示エリアの開始列ライン数表示エリアの終了列ライン数;
余白：gap (例：gap : 10px)
単位：fr = fraction (例：1fr 2fr / repeat(4,1fr))
初期表示
使用html
|
|
<div class="container"> <p>RED</p> <p>BLUE</p> <p>YELLOW</p> <p>GREEN</p> <p>PURPLE</p> </div> |
完成見本
レイアウト基準
responsive
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
*{ margin: 0; padding: 0; } body{ line-height: 1; font-family: sans-serif; } .container{ color:#fff; font-size:2em; font-weight:bold; text-align: center; height: 100vh; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); /* grid-template-areas: "LT CC RT" "LB CC RB"; */ gap: 20px; } .container p:nth-child(1){ background: #f00; /* grid-area: LT; */ grid-column: 1; grid-row: 1; } .container p:nth-child(2){ background: #00f; /* grid-area: LB; */ grid-column:1 ; grid-row:2 ; } .container p:nth-child(3){ background: #ff0; color: #f00; /* grid-area: CC; */ grid-column:2; grid-row: 1/3; } .container p:nth-child(4){ background: #0a0; /* grid-area: RT; */ grid-column: 3; grid-row: 1; } .container p:nth-child(5){ background: #f0f; /* grid-area: RB; */ grid-column: 3; grid-row:2 ; } @media (max-width:743px){ .container{ grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(4,1fr); } .container p:nth-child(1){ grid-column:1 ; grid-row:1 ; } .container p:nth-child(2){ grid-column:1 ; grid-row:2 ; } .container p:nth-child(3){ grid-column:2 ; grid-row:1/5 ; } .container p:nth-child(4){ grid-column:1 ; grid-row:3 ; } .container p:nth-child(5){ grid-column:1 ; grid-row:4; } } @media (max-width:500px){ .container{ grid-template-columns: 1fr; grid-template-rows: repeat(5,1fr); } .container p:nth-child(1){ grid-column:1 ; grid-row:1; } .container p:nth-child(2){ grid-column:1 ; grid-row:2 ; } .container p:nth-child(3){ grid-column:1 ; grid-row:5 ; } .container p:nth-child(4){ grid-column:1; grid-row:3 ; } .container p:nth-child(5){ grid-column:1; grid-row:4; } } |