Grid Layout

Grid

Grid Layout

grid-template-areas/columns/rowsで間違えてしまってgridにならずblockになってしまう。

CSS Grid property

grid 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 */
Header
Menu
Main
Right
5
6
7
8
9
10
Footer

grid-column-gap: 10px; grid-row-gap:30px;
grid-gap: 10px(column) 30px(row);/padding: 10px;

inline-grid

1
2
3
4
5
6
7
8
9

display: grid;

grid-gap: 10px 50px;/padding: 10px;

1
2
3
4
5
6
7
8
9
try it, grid-colulmn-strat/end, grid-row-start/end.

justify-content: space-evenly;

1
2
3
4
5
6
7

justify-content: space-around;

1
2
3
4
5
6
7

justify-content: space-between;

1
2
3
4
5
6
7

justify-content: center;

1
2
3
4
5
6
7

justify-content: start;

1
2
3
4
5
6
7

justify-content: end;

1
2
3
4
5
6
7

Grid: align-content: center/space-evenly/space-around/space-between/start/end

grid:align-content: center;

grid: align-content: center;

1
2
3
4
5
6

grid: align-content: space-evenly;

1
2
3
4
5
6

grid: align-content: space-around;

1
2
3
4
5
6

grid: align-content: space-between;

1
2
3
4
5
6

grid: align-content: start;

1
2
3
4
5
6

grid: align-content: end;

1
2
3
4
5
6

Grid Item

tryit editor. grid-column/row

grid-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;"

1
2
3
4
5
6
7
9
10
11
12

grid-area: name; が一つでも位置がズレると総崩れになる。

Header
Menu
Main
Right
Footer
CSS Templates

float, flex, grid を使ったレイアウト集

@media only screen and (max-width:800px) {}

1
2
3
4
5
6

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;"

1
2
3
4
5
6

style="grid-auto-flow: row;"

1
2
3
4
5
6

style="grid-auto-flow: row dense;"
2 and 3: grid-column: auto: span 2;
rowを詰める

1
2
3
4
5
6

style="grid-auto-flow: column dense;
2, 3 and 5: grid-row: auto / span 2;
columnを詰める

1
2
3
4
5
6
7


some text
    .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 を左寄せ。無いと離れてしまう。
  }

コメント

このブログの人気の投稿

スタートアップフォルダとAmatsukazeのエンコード設定

EDCB Recname_MacroのRMで文字削除がうまく行かない

冠山トンネル周辺のライブカメラ