Чем отличается контейнер от контейнера сетки в Material-UI?

#reactjs #grid #material-ui

#reactjs #сетка #материал-пользовательский интерфейс

Вопрос:

Как я уже упоминал в вопросе: чем отличается атрибут Container от атрибута Grid container в Material-UI?

Большое спасибо!

Ответ №1:

Я посетил документацию material UI, вот что я нашел при проверке этих:

Контейнер

При использовании <Container> в вашем коде к вашему компоненту будут применены следующие стили <Container> .

введите описание изображения здесь

Как вы можете видеть на скриншоте выше, присутствуют два важных свойства,

  • display: block
  • max-width: 600px (В медиа-запросах, поэтому он варьируется в зависимости от ширины области просмотра)

Сетка

При использовании в вашем коде контейнера атрибутов будут применены следующие стили,

введите описание изображения здесь

Как вы можете видеть выше, он использует макет flexbox для хранения столбцов, что может быть полезно для хранения гибких элементов (т.Е. Столбцов). Также он имеет свою максимальную ширину, установленную в зависимости от типа заданного вами интервала.

После проверки эти различия, на мой взгляд, <Container> используются для внешней оболочки, которая содержит в себе все компоненты, тогда <Grid container> как может использоваться для создания макета столбцов (12 столбцов), что на самом деле невозможно в случае <Container> .

Комментарии:

1. Большое вам спасибо за ваш ответ

2. @TruongHoang добро пожаловать