Grid Layout
Grid Layout
grid-template-areas/columns/rowsで間違えてしまってgridにならずblockになってしまう。
CSS Grid propertygrid syntax
grid-template-columns: auto 100px auto; ならば3columns 真ん中width: 100px;
指定がないとblockに。
grid-template-rows: auto auto 100px; 3 rows 一番下が height: 100px;
指定がないとautoに。
grid-template-columns: grid-template-rows:を省略しないように。特にgird-template-columns: を。
同時に指定する場合に限り
grid: (grid-temlate-rows: height and the numbers) / (grid-template-columns: width and the numbers)
3つ は書き方違っても同じ並びに。
.grid-container { display: grid; grid-template: 100px 150px 80px / auto auto auto; } tryit editor
.grid-container { display: gird; grid-template-columns: auto auto auto; gird-tempate-rows: 100px 150px 80px; } tryit editor
.grid-container { display: grid; grid: 100px 150px 80px / auto auto auto; } tryit editor
Grid layout has six columns and three rows:
display: grid; grid-template-columns: 200px auto auto auto auto 200px; /* 6 */ grid-template-rows: 120px 280px auto ; /* 3 */
grid-column-gap: 10px; grid-row-gap:30px;
grid-gap: 10px(column) 30px(row);/padding: 10px;
inline-grid
display: grid;
grid-gap: 10px 50px;/padding: 10px;
justify-content: space-evenly;
justify-content: space-around;
justify-content: space-between;
justify-content: center;
justify-content: start;
justify-content: end;
Grid: align-content: center/space-evenly/space-around/space-between/start/end
grid:align-content: center;
grid: align-content: center;
grid: align-content: space-evenly;
grid: align-content: space-around;
grid: align-content: space-between;
grid: align-content: start;
grid: align-content: end;
Grid Item
tryit editor. grid-column/rowgrid-column/row: starting-line / ending-line
grid-area: grid-row-start, /grid-column-start, /grid-row-end, /grid-column-end
item9 {grid-area: 1 / 2 / 5/ 6;}
item10 { grid-area: 4 / 6 / span 2 / span 1;
<div style="grid-area: 1 / 2 / 5 / 6;"
grid-area: name; が一つでも位置がズレると総崩れになる。
float, flex, grid を使ったレイアウト集
@media only screen and (max-width:800px) {}
grid-auto-flow: column/ row
<div style="background-color: coral; background-image: linear-gradient(rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.3))"> ===== バックグラウンドカラーと、半透明のグラデーション変化(from top to bottom) CSS linear-gradient
4 colums and 2 rows
style="grid-auto-flow: column;"
style="grid-auto-flow: row;"
style="grid-auto-flow: row dense;"
2 and 3: grid-column: auto: span 2;
rowを詰める
style="grid-auto-flow: column dense;
2, 3 and 5: grid-row: auto / span 2;
columnを詰める

.tooltip { position: relative; } .tooltip::after { content:""; position:absolute; top: 50%; right: 100%; margin-top: -8px; border-width: 8px; border-style: solid; border-color: transparent grey transparent transparent; } .grid-two { display: grid; grid-template-columns: auto auto; grid-gap: 10px; justify-content: start; 2 columns を左寄せ。無いと離れてしまう。 }
コメント
コメントを投稿