CSS

【CSS】CSSグリッドレイアウト60GS

August 25, 2018
60GS

60 Grid Systemは、CSSグリッド用のスターターグリッドです。

Install

CDNを使用可能。

 <link rel="stylesheet" href="https://unpkg.com/60gs@1.0.0/60gs.css">
or
 <link rel="stylesheet" href="https://unpkg.com/60gs@1.0.0/60gs-barebone.css">

コード

.grid {
          display: grid;
          grid-template-columns: repeat(60, 1fr)
        }

任意の幅

.grid {
   width: 1237px / 83% / 40rem /* random numbers */
   display: grid;
   grid-template-columns: repeat(60, 1fr)
}

グリッドギャップを追加

.grid {
   width: 1237px / 83% / 40rem /* random numbers */
   display: grid;
   grid-gap: 10px; /* random number */
   grid-template-columns: repeat(60, 1fr)
}

MIT