gridを使ってグリッドレイアウト（カードレイアウト）を作成せよ - レクチャーサイト

11gridを使ってグリッドレイアウト（カードレイアウト）を作成せよ

emoji_objects

.group {
  display: grid;
  column-gap: 2.5%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.group li {
  margin-bottom: 10.81081%;
}
.group li:nth-child(n+5) {
  margin-bottom: 0;
}


-- メディアクエリの場合 --
@media screen and (max-width: 800px) {
  .group {
    grid-template-columns: 1fr 1fr;
  }
  .group li {
    margin-bottom: 5.2356%;
  }
}
@media screen and (max-width: 500px) {
  .group {
    grid-template-columns: 1fr;
  }
}

-- コンテナクエリの場合の親要素（.groupの親要素） --
#question128 .contents .box {
  container-type: inline-size;
  container-name: question128-box;
  /* container: box / inline-size; */
}
-- コンテナクエリの場合 --
@container question128-box (max-width: 800px) {
  .group {
    grid-template-columns: 1fr 1fr;
  }
  .group li {
    margin-bottom: 5.2356%;
  }
}
@container question128-box (max-width: 500px) {
  .group {
    grid-template-columns: 1fr;
  }
}

ヒント

.group {
  display: grid;
  gap: ???;
  grid-template-columns: ???;
}