October
20

2017

CSSでグリッドレイアウト

CSSで出来る高さが揃っていなくても、上に詰めて表示されるグリッドレイアウトのご紹介です。

それでは、ソースサンプルとデモページをご覧ください。

▼以下が実際のソースサンプルです。
▼CSS


.grid{
    background: #eee;
    max-width: 220px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}
@media screen and (min-width: 1200px) {
.grid-container {
  -webkit-column-count: 5;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 5;
  -moz-column-gap: 10px;
  -moz-column-fill: balance;
  column-count: 5;
  column-gap: 10px;
  column-fill: auto;
 }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
.grid-container {
  -webkit-column-count: 4;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 4;
  -moz-column-gap: 10px;
  -moz-column-fill: balance;
  column-count: 4;
  column-gap: 10px;
  column-fill: auto;
 }
}
@media screen and (min-width: 769px) and (max-width: 992px) {
.grid-container {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-fill: balance;
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
 }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
.grid-container {
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -moz-column-fill: balance;
  column-count: 2;
  column-gap: 10px;
  column-fill: auto;
 }
}
@media screen and (max-width: 480px) {
.grid-container {
  -webkit-column-count: 1;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 1;
  -moz-column-gap: 10px;
  -moz-column-fill: balance;
  column-count: 1;
  column-gap: 10px;
  column-fill: auto;
 }
}
.grid {
 display: inline-block;
 -webkit-column-break-inside: avoid;
 -moz-column-break-inside: avoid;
 column-break-inside: avoid;
}
/* Google Chorome BugFix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
 .grid {
  display: block !important;
 }
}
 


▼HTML

    <div class="grid-container">
    <div class="grid">
    <figure>
        <img src="img/01.jpg" width="200" height="150" alt="">
        <figcaption>no.1 <br>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</figcaption>
    </figure>
     </div>
    <div class="grid">
    <figure>
        <img src="img/02.jpg" width="200" height="150" alt="">
        <figcaption>no.2<br>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</figcaption>
    </figure>
     </div>
    <div class="grid">
    <figure>
        <img src="img/03.jpg" width="200" height="150" alt="">
        <figcaption>no.3<br>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</figcaption>
    </figure>
     </div>
    <div class="grid">
    <figure>
        <img src="img/04.jpg" width="200" height="150" alt="">
        <figcaption>no.4<br>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</figcaption>
    </figure>
     </div>
    <div class="grid">
    <figure>
        <img src="img/05.jpg" width="200" height="150" alt="">
        <figcaption>no.5<br>テキスト テキスト テキスト テキスト テキスト テキスト</figcaption>
    </figure>
     </div>
    <div class="grid">
    <figure>
        <img src="img/06.jpg" width="200" height="150" alt="">
        <figcaption>no.6<br>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</figcaption>
    </figure>
     </div>
    <div class="grid">
    <figure>
        <img src="img/07.jpg" width="200" height="150" alt="">
        <figcaption>no.7<br>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</figcaption>
    </figure>
     </div>
    <div class="grid">
    <figure>
        <img src="img/08.jpg" width="200" height="150" alt="">
        <figcaption>no.8<br>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</figcaption>
    </figure>
     </div>
    <div class="grid">
    <figure>
        <img src="img/09.jpg" width="200" height="150" alt="">
        <figcaption>no.9<br>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</figcaption>
    </figure>
     </div>
    <div class="grid">
    <figure>
        <img src="img/10.jpg" width="200" height="150" alt="">
        <figcaption>no.9<br>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</figcaption>
    </figure>
     </div>
    </div>
 


今回、参考にさせていただいたのは、
『hyperspace』さんです。
ありがとうございます。

デモページは、こちら