[css]よく使うgridの構成メモ

局所的な話です。

参考
バナー群用
ヘッダー、メイン、サブ的な構成

参考

そんなに苦もなく理解できる。

CSS Grid Layout を極める！（基礎編） - Qiita

0. はじめにCSS Grid Layout（グリッドレイアウト）は、2次元レイアウトを、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。格子状のマス目のグリッドに好…

しかしまり使わないので中々覚えきれない。styleタグなんだっけ？って見に行くのめんどくさいから覚えたい。つらい。

バナー群用

<ul>
    <li><a href=""><img src="https://placehold.jp/600x200.png" alt=""></a></li>
    <li><a href=""><img src="https://placehold.jp/600x200.png" alt=""></a></li>
    <li><a href=""><img src="https://placehold.jp/600x200.png" alt=""></a></li>
    <li><a href=""><img src="https://placehold.jp/600x200.png" alt=""></a></li>
    <li class="full"><a href=""><img src="https://placehold.jp/1200x200.png" alt=""></a></li>
</ul>

通常1行2列、たまに1行1列。

ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
ul li.full{
    grid-column: 1 / 3;
}

当然ながら、通常サイズが奇数のところに1列になるやつを置いたら隙間が空く。そこらへんは仕様として、調整するかわかった上でやるか、ルールを作る。

ヘッダー、メイン、サブ的な構成

<div class="wrap">
    <div class="head"></div>
    <div class="main"></div>
    <div class="sub"></div>
</div>

.wrap{
    display: grid;
    grid-template-columns: auto 300px;
    grid-template-rows: auto auto;
    row-gap: 40px;
    column-gap: 60px;
}
.header{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}
.main{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.sub{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

gridで組めばhtmlタグを減らすことができる。

grid位置指定の解除はこう。

.header, .main ,.sub{
    grid-column: auto;
    grid-row: auto;
}

レスポンシブで縦並びにしたいときとか、知らないと詰むやつ。