CSS Gridを使った超シンプルなグリッドシステム | かちびと.net

Result CSS Gridを使った超シンプルなグリッドシステムです。 必須コードは5行くらいでカラム数は必要に応じて追加すれば完成します。 css .grid-wrapper { display: grid; grid-gap: 0 2rem; grid-template-columns: repeat(12, 1fr);/*カラム数設定*/ margin: 0 auto; width: 100%; } /*任意*/ .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span