web-dev-qa-db-ja.com

CSSグリッドの折り返し

メディアクエリを使用せずにCSSグリッドを折り返すことは可能ですか？

私の場合は、グリッドに配置したいアイテムの数が決まっていないので、そのグリッドを折り返します。 flexboxを使用して、私は物事を確実にうまく配置することができません。私もたくさんのメディアの問い合わせを避けたいのです。

これが いくつかのサンプルコード ：

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

そしてこれがgifです。

gif of what I'm seeing

ちなみに、私がgrid-template-columnsを使っているときのようにすべての項目の幅を指定するのを避けることができる方法を誰かに教えてもらえればそれは素晴らしいことです。私は子供たちに彼ら自身の幅を指定することを好みます。

htmlcsscss3css-grid
65
kentcdodds

auto-fill または auto-fit のいずれかを repeat() の繰り返し回数として使用します。

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

auto-fill

繰り返し数としてauto-fillが指定されている場合、グリッドコンテナの軸の長さが一定または最大サイズの場合、繰り返し数はグリッドがグリッドコンテナをオーバーフローさせない最大の正の整数です。

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

グリッドは、コンテナをオーバーフローさせずにできるだけ多くのトラックを繰り返します。

Using auto-fill as the repetition number of the repeat() notation

この場合、上記の例（画像を参照）を考えると、5つのトラックだけがオーバーフローすることなくグリッドコンテナに収まります。グリッドには4つの項目しかないため、5番目の項目は残りのスペース内の空のトラックとして作成されます。

残りのスペース、トラック＃6は、明示的グリッドを終了します。これは別のトラックを配置するのに十分なスペースがなかったことを意味します。

auto-fit

auto-fitキーワードは、 グリッド項目配置アルゴリズム の後の残りのスペース内の空のトラックがauto-fillに折りたたまれることを除いて、0と同じように動作します。

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

グリッドはコンテナをオーバーフローさせずにできるだけ多くのトラックを繰り返しますが、空のトラックは0に折りたたまれます。

折りたたまれたトラックは0pxの固定トラックサイジング機能を持つものとして扱われます。

Using auto-fit as the repetition number of the repeat() notation

auto-fillイメージの例とは異なり、空の5番目のトラックは折りたたまれ、4番目の項目の直後で明示的なグリッドが終了します。

auto-fillとauto-fit

この2つの違いは、 minmax() 関数を使用したときに顕著になります。

minmax(186px, 1fr)を使用して、186pxから186pxまでの項目にグリッドコンテナー内の残りのスペースの一部を追加します。

auto-fillを使用するとき、空のトラックを配置するスペースがなくなるとアイテムは大きくなります。

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

auto-fitを使用すると、空のトラックはすべて0pxに折りたたまれるため、アイテムは残りのスペースを埋めるように大きくなります。

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

遊び場：

CodePen

オートフィルトラックの検査

auto-fill

自動調整トラックの検査

auto-fit

112
Ricky

repeat()関数内にauto-fitまたはauto-fillが必要です。

grid-template-columns: repeat(auto-fit, 186px);

この2つの違いは、柔軟な列サイズを可能にするためにminmax()も使用すると明らかになります。

grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));

これにより、186ピクセルからコンテナの幅いっぱいに広がる等幅のカラムまで、カラムのサイズを柔軟に変更できます。 auto-fillは幅に収まるだけの数の列を作成します。たとえば、グリッド項目が4つしかなくても5つの列が収まる場合は、5番目の空の列が表示されます。

enter image description here

代わりにauto-fitを使用すると、空の列を防ぐことができ、必要に応じて列をさらに伸ばすことができます。

enter image description here

14
keithjgrant

auto-fillをお探しですか？

grid-template-columns: repeat(auto-fill, 186px);

デモ： http://codepen.io/alanbuchanan/pen/wJRMox

利用可能なスペースをより効率的に使い果たすには、minmaxを使用し、2番目の引数としてautoを渡します。

grid-template-columns: repeat(auto-fill, minmax(186px, auto));

デモ： http://codepen.io/alanbuchanan/pen/jBXWLR

空の列が不要な場合は、auto-fitの代わりにauto-fillを使用できます。

6
alanbuchanan

私は同様の状況を経験しました。あなたがしたことに加えて、私は自分の列をコンテナの中央に配置し、空の列を左右に配置しないようにしたいと思いました。

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}
1
farrellw

これが私の試みです。 綿毛をすみません、私は特別なクリエイティブを感じていました。

私の方法は、fixeddimensionsを持つ親divです。あとは、それに応じてそのdiv内のコンテンツを合わせるだけです。

これは、アスペクト比に関係なく、画像を再スケールします。 ハードトリミングなしもあります。

body {
        background: #131418;
        text-align: center;
        margin: 0 auto;
}

.my-image-parent {
        display: inline-block;
        width: 300px;
        height: 300px;
        line-height: 300px; /* should match your div height */
        text-align: center;
        font-size: 0;
}

/* Start demonstration background fluff */
    .bg1 {background: url(https://unsplash.it/801/799);}
    .bg2 {background: url(https://unsplash.it/799/800);}
    .bg3 {background: url(https://unsplash.it/800/799);}
    .bg4 {background: url(https://unsplash.it/801/801);}
    .bg5 {background: url(https://unsplash.it/802/800);}
    .bg6 {background: url(https://unsplash.it/800/802);}
    .bg7 {background: url(https://unsplash.it/802/802);}
    .bg8 {background: url(https://unsplash.it/803/800);}
    .bg9 {background: url(https://unsplash.it/800/803);}
    .bg10 {background: url(https://unsplash.it/803/803);}
    .bg11 {background: url(https://unsplash.it/803/799);}
    .bg12 {background: url(https://unsplash.it/799/803);}
    .bg13 {background: url(https://unsplash.it/806/799);}
    .bg14 {background: url(https://unsplash.it/805/799);}
    .bg15 {background: url(https://unsplash.it/798/804);}
    .bg16 {background: url(https://unsplash.it/804/799);}
    .bg17 {background: url(https://unsplash.it/804/804);}
    .bg18 {background: url(https://unsplash.it/799/804);}
    .bg19 {background: url(https://unsplash.it/798/803);}
    .bg20 {background: url(https://unsplash.it/803/797);}
/* end demonstration background fluff */

.my-image {
        width: auto;
        height: 100%;
        vertical-align: middle;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
}
<div class="my-image-parent">
 <div class="my-image bg1"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg2"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg3"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg4"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg5"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg6"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg7"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg8"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg9"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg10"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg11"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg12"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg13"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg14"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg15"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg16"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg17"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg18"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg19"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg20"></div>
</div>
0
I haz kode