Как получить гибкую сетку, масштабируемую по размеру страницы, вместо обертывания с использованием css - PullRequest
Новая
       0

Как получить гибкую сетку, масштабируемую по размеру страницы, вместо обертывания с использованием css

1 голос
/ 30 мая 2020

5.30.20 EDIT: работает в средстве просмотра фрагментов кода stackoverflows, но не на chrome или любом html хостинге. Вот размещенный файл:

https://unholytool.htmlpasta.com/

интересно, что происходит.

Вот изображение, чтобы показать, о чем я говорю о

https://i.stack.imgur.com/ggQcF.png

Итак, я новичок в CSS и не нахожу удачи в Google.

У меня есть настроенный медиа-запрос, который отлично работает для мобильных устройств, однако я не могу заставить его правильно отображаться на мониторах разных размеров.

На очень широких экранах он хорошо работает и отображает четыре столбца и левую боковую панель.

Однако по мере того, как экран сжимается, он отображает нечеткое отображение трех изображений в одной строке и одного изображения в следующей строке

Это мой текущий дисплей с ответом ниже 

body {
  font-family: 'Montserrat';
  font-size: 18px;
}

.body {
  margin-left: 5%;
  margin-right: 5%;
}

.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 400px height:90px max-width: 30%;
}

.hero {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.leftsidebar {
  display: none;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.column {
  margin-left: 1%;
  margin-right: 1%;
}

@media screen and (min-width: 1050px) {
  .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  .column {
    flex: 1 1 auto;
  }
 

.container {
  display: grid;
}

.leftsidebar {
  grid-column: 1;
  display: inherit;
}

.products {
  grid-column: 2;
}


}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Our Catalog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel='stylesheet'>
  <style>

  </style>
</head>

<body class="body">
  <div>
    <img class="logo" src="logoimg.jpeg">

  </div>
  <hr class="divider">
  <div>
    <picture>
      <source media="(max-width: 799px)" class="hero" srcset="heroimg1.jpeg, heroimg2.jpeg">
      <img class="hero" src="heroimg1.jpeg">
    </picture>
  </div>


  <hr class="divider">
  <div class="container">
    <div class="leftsidebar">
      <img src="img.jpeg" />
    </div>
    <div class="products">
      <div class="row">
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
      </div>
      <div class="row">
        <div class="column">
          <img src="img.jpeg" />
          <h1>product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
      </div>
      <div class="row">
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
      </div>
      <div class="row">
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
        <div class="column">
          <img src="img.jpeg" />
          <h1> product</h1>
          <p>$100</p>
        </div>
      </div>
    </div>
  </div>
  <hr class="divider">
  <br>
  <h3>Return Policy | Shipping Policy | Privacy Policy | About Us | Our Cause</h3>
  <br>
  <hr class="divider">


</body>

</html>

Я пробовал много всего, в том числе использовал свойства flex-shrink и flex-grow для всех элементов,

возиться с Атрибуты высоты и ширины устанавливают их между авто и%.

и установка% с помощью свойства flex

Есть идеи? Я пытаюсь свести javascript к минимуму, поэтому только CSS.

1 Ответ

0 голосов
/ 30 мая 2020

Я настроил ваш flexbox CSS, и он должен работать в соответствии с вашими требованиями. Я также добавил </div> для каждого <div class="column">

.row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.column {
  flex: 1 1 auto;
}
<div class="row">
  <div class="column">
    <img src="image.jpeg" />
    <h1> text</h1>
    <p>text</p>
  </div>
  <div class="column">
    <img src="image.jpeg" />
    <h1> text</h1>
    <p>text</p>
  </div>
  <div class="column">
    <img src="image.jpeg" />
    <h1>text</h1>
    <p>text</p>
  </div>
  <div class="column">
    <img src="image.jpeg" />
    <h1>text</h1>
    <p>text</p>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...