2018年09月16日(日)
CSS Gridを使った超シンプルなグリッドシステム
Result
See the Pen vzzKNb by kachibito (@kachibito) on CodePen.
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 6; } .col-7 { grid-column: span 7; } .col-8 { ...
0
15
4
27author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSS Gridを使った超シンプルなグリッドシステム』についてまとめています。
この記事は特にjavascript・アニメーション・jQueryについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
