CSSのグリッドですが、
「最後のcolumun」と「最後のrow」を指定する方法はあるのでしょうか?
以下は、「最初のcolumunやrow」なので分かるのですが、
auto-fillで分割すると、最後が何行?何列?と分からないと認識しています。
これを例えば、last-of-typeで指定できるような方法はあるのでしょうか?
よろしくお願い致します。
html
1<div class="transform"><div class="sws"></div><div class="sws"></div></div>
.transform { transform:skewY(-12deg); display: grid; grid-template-columns: repeat(auto-fill, calc(100%/20)); grid-template-rows: repeat(auto-fill, minmax(64px, 1fr)); } .sws:first-child { background-color: #ff0000; grid-column: span 6; grid-row: 1; } .sws:nth-child(2) { background-color: #ffff00; grid-column: span 2; grid-row: 2; }
あなたの回答
tips
プレビュー