gridを使って2カラムのレイアウトをレスポンシブに対応させよ - レクチャーサイト

10gridを使って2カラムのレイアウトをレスポンシブに対応させよ

emoji_objects

未知の領域に挑戦しよう。

私たちの強みは、社員一人ひとりが自分のアイデアを実現できる環境が整っていることです。社員が自由にアイデアを出し合い、チームで実現することで、革新的なプロダクトを作り出しています。また、未経験からでもキャリアアップが可能な教育環境を整備しており、社員の成長を支援しています。

-- グループ要素 --
.group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
}


-- メディアクエリの場合 --
@media screen and (max-width: 900px) {
  .group {
    display: block;
  }
}


-- コンテナクエリの場合の親要素（.groupの親要素） --
********** {
  container-type: inline-size;
  container-name: chapter3-10-box;
}
-- コンテナクエリの場合 --
@container chapter3-10-box (max-width: 900px) {
  .group {
    display: block;
  }
}

ヒント

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