Блог

Я новичок в этой области. Я пытаюсь создать несколько строк и столбцов с адаптивным дизайном. Без использования каких-либо js. Внутри этого изображения в каждом поле есть изображение. нажмите здесь, чтобы проверить режим экрана.

Я пробовал использовать html

       <div className="photoGallery">
        <div className="col">
          <img src={1} alt="this is minion" />
          <img src={2} alt="" />
        </div>

        <div className="col">
          <img src={4} alt="" />
          <img src={7} alt="" />
          <img src={4} alt="" />
        </div>

        <div className="col">
          <img src={4} alt="" />
          <img src={4} alt="" />
          <img src={7} alt="" />
        </div>

        <div className="col">
          <img src={7} alt="" />
          <img src={4} alt="" />
          <img src={2} alt="" />
        </div>
      </div>
 

и css

 .photo-gallery {
  margin-top: 5rem !important;
  margin-bottom: 3rem !important;
}

.photo-gallery .head {
  padding-bottom: 5%;
}

.title {
  width: 50%;
  border-bottom: solid #919191;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .title {
    font-size: 1.5rem;
  }
}
@media (min-width: 768px) {
  .title {
    font-size: 2rem;
  }
}

.title-text {
  /* height: 35px; */
  color: #ffffff;
  opacity: 62%;
}

.photoGallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.photoGallery .col {
  -webkit-box-flex: 24%;
  -ms-flex: 24%;
  flex: 24%;
  max-width: 24%;
  padding: 0.25%;
}

@media screen and (max-width: 800px) {
  .photoGallery .col {
    -webkit-box-flex: 49%;
    -ms-flex: 49%;
    flex: 49%;
    max-width: 49%;
  }
}

@media screen and (max-width: 600px) {
  .photoGallery .col {
    -webkit-box-flex: 99%;
    -ms-flex: 99%;
    flex: 99%;
    max-width: 99%;
  }
}

.photoGallery .col img {
  vertical-align: middle;
  width: 100%;
  margin: 0.5% 0;
  @media (max-width: 599px) {
        width: 100%;
        height: auto;
        padding-left: 15px;
        padding-right: 15px;
}
}
 

Но не в состоянии создать нажмите здесь.Любое предложение мне очень поможет.
Спасибо

Здравствуйте, вы можете увидеть в проводнике Google Chrome при добавлении display: flex; свойства это меню :

Я думаю, что это лучший способ для вас научиться использовать свойства flexbox.

Вы также можете нажать кнопку «flex» в категории элементов вашего режима разработчика, чтобы просмотреть границы каждого дополнительного раздела вашего основного раздела с помощью свойства «отображать гибкий». :