[CSS][DJplaylist] grid auto-fit, auto-fill

10182 ワード
テキストリンク
gridを用いて反応型ページを作成する場合は,以下のコード方式で作成する.しかし화면을 축소할 때、容器の幅もそれに伴って変わりますが、고정된 column의 갯수 때문에 grid의 item들이 범위를 벗어나게 되었다.
const container = props => css`
  width: 60vw; // 반응형 너비
  background: black;
`;

const grid = props => css`
  display: grid;
  grid-template-columns: repeat(3, minmax(250px,1fr));
  gap: 1rem;
`

const box = props => css`
  width: 250px;
  height: 250px;

  justify-self: center;

  display: flex;
  align-items: center;
  justify-content: center;

  &:nth-of-type(2n) {
    background: red;
  }

  &:nth-of-type(2n + 1) {
    background: orange;
  }
`;
<div css={container}>
  <div css={grid}>
    <div css={box}>1</div>
    <div css={box}>2</div>
    <div css={box}>3</div>
    <div css={box}>4</div>
  </div>
</div>

media query


この問題を解決するために,media queryを用いて範囲を超えたときに,列数を調整するように修正した.
const grid = props => css`
  / * 생략 */
  @media (max-width: 900px) {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
`
しかし、グーグル検索の過程で、一つ一つ変えるより良い方法はありませんか?

auto-fill, auto-fit

auto-fillおよびauto-fitは행 또는 열의 item 개수가 명확하지 않을 때 유용하게 쓸 수 있는 방식である.
この場合、auto-fillを使用して、メッシュサイズに合わせて行または列の数を自動的に調整することができる.
const grid = props => css`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;

Autofill、auto-fitの違い


例えば、上記の場合、2つのitemしかないと仮定する.
下図に示すように、auto-fitを使用すると、メッシュは残りの空白を埋め尽くします.
逆に、auto-fillを使用すれば、次の項目に入る余地を提供することができる.
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

私から見れば、幅の内側を中央に揃えたいなら、auto-fit方式を使ったほうがいいです.左に傾けたいなら、auto-fill方式を使ったほうがいいです.
(auto-fit方式を使用する場合は、itemを中央に配置するには、itemにvalidation-self:center;align-self:center;

適用結果




transformを適用した親の子要素の位置:固定学習
レスポンス・ファクト
Activityが実行されているかどうかを判断するにはどうすればいいですか?