[CSS] 21. Grid 2

1）Grid領域

行番号で領域を配置できます.
線は時計回りです.

直接ネーミング可能領域

2）実習

Grid形状は以下の通りです.

html

<div class="grid-area">
        <div class="header">header</div>
        <div class="aside">aside</div>
        <div class="main">main</div>
        <div class="footer">footer</div>
</div>

css

.grid-area{
    display: grid;

    grid-template-columns: 250px 1fr;
    grid-template-rows: 70px minmax(200px, 1fr) 100px;
    grid-template-areas:
    "header header"
    "aside main"
    "footer footer"; 
}

.grid-area> .header{
    background-color: yellow;
    grid-area: header;

}

.grid-area> .aside{
    background-color: green;
    grid-area: aside;

}

.grid-area> .main{
    background-color: orange;
    grid-area: main;

}

.grid-area> .footer{
    background-color: skyblue;
    grid-area: footer;

}

試行実践

.rland>article{
    display: grid;

    grid-template:
    "img title"     35px
    "img content"   65px
    / 100px 1fr;
}


.rland>article>h1{
    grid-area: title;
}


.rland>article>div{
    grid-area: img;
}

.rland>article>p{
    grid-area: content;
}

.rland>article>div>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

3)コンテナを埋めるトラックを作成する

アイテムは自動的に1つのセルを占めます.
トラックを自動的に下に追加

右へ
1)オートフィルの手順→auto-fill
2)道具があれば記入するか、記入しない→auto-fit

以下に示すgridを作成します.

html

<div class="grid-box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
</div>

css

grid-box{
    display:grid;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(1, 100px);
}

.grid-box>div:nth-child(1){
    background-color: orangered;
}

.grid-box>div:nth-child(2){
    background-color: green;
}

.grid-box>div:nth-child(3){
    background-color: skyblue;
}
.grid-box>div:nth-child(4){
    background-color: orange;
}

空白を分かち合いたい時
grid-template-columns:repeat(auto-fit, minmax(100px,auto));(箱は100 px未満ではいけません.)

新しく追加したアイテムのサイズを上の行と同じにしますか?

grid-template-rows代替grid-auto-rowsです.(列も同様)

.grid-box {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(100px,auto));
    grid-auto-rows:100px 100px;
}

4)trackの簡単な表現を作成する

repeatは使用できません.

.grid-area{
    display: grid;

    grid-template:
    "header header" 70px
    "aside main" minmax(200px, 1fr)
    "footer footer"  100px
    / 250px 1fr;

以上のコードは、以下のグリッドを得ることができる.

アイテムは縦に並べられます.

.grid-box {
    display: grid;
    grid-template-columns: repeat(3,100px);
    grid-template-rows: repeat(4,100px);

    grid-auto-flow: column;
}

5)グリッド整列制御

大きく2つのソートがあります.

大枠の自己配置

アイテムに余白がある場合の位置合わせ

用語
水平はinline/row軸垂直はblock軸です.
水平:videf-/垂直:align-接続.

.grid-box {
    display: grid;
    
    grid-template: repeat(2, 100px) / repeat(2, 100px);

    grid-template-areas:
    "a b"
    "c d";

    align-items: center;
    justify-items: center;
    justify-content: end;
    align-content: space-between;

    
    place-items: center center;
    place-content: space-between end;

    height: 400px; 
}

align-items: center;垂直に並べたもの.

align-self: end;item 1をalign軸末端に配置します.

.grid-box>div:nth-child(1){
    background-color: orangered;
    align-self: end;
}

justify-items: center;物品を水平に並べ替える.

justify-self: start;item 2を正軸startに配置します.

.grid-box>div:nth-child(2){
    background-color: green;
    justify-self: start;
}

justify-content: end;コンテンツ自体を正軸端点に配置します.

align-content: center;マージンがないので、何も起こりません.height: 400px;が追加された場合、以下に示すようにalign-content: center;が適用される.

align-content: space-between;コンテンツをalign軸の両側に配置します.

b(item 2)にmargin-top:auto;を追加した場合

.grid-box>div:nth-child(2){
    background-color: green;
    justify-self: start;
    margin-top:auto;
}

6）簡略表示

place-items:center(軸を揃える)center(軸を調整する);
place-content/place-sselfもそうです.

7）行名

エリア名のみならず、行名も指定できます.

セルの前後にオンライン名を付けます.

grid-column/row-start/endでは、行番号の代わりに名前を使用することもできます.
線は名前ではなく2つあります.

grid-template:
   [header-start] 70px 
   [header-end aside-start] minmax(200px,1fr) 
   [aside-end footer-start] 100px 
   [footer-end]
    / [aside-start] 250px [aside-end main-start] 1fr [main-end]; 

これにより、メッシュを作成できます.
線に名前を付けなくても、エリア名が確定した瞬間にstart、endの名前が自動的に付与されます.