2023年2月18日 00:31:31go评论72阅读模式

英文:

How do I make this grid responsive, especially for mobile and smaller screens

问题

我正在尝试使我的1行网格具有响应性，以便在屏幕或窗口较小或缩小时转变为多行，但我似乎无法弄清楚。我有一种感觉，现在我已经到了这一步，使网站的这一部分成为网格可能不是最优的选择，但我在这个领域经验不多，我宁愿现在保持它是一个网格。无论我尝试过什么，网格始终保持1行或失去其格式。希望有其他人在这个领域有更多知识愿意分享。

以下是我的HTML：

<div class="home-grid-container">
    <div class="home-grid-container__slide">
        <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf33category.jpg" alt="CF-33 Product" title="CF-33 Product Category"></a>
        <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33">Panasonic CF-33</a></button>
    </div>
    <div class="home-grid-container__slide">
        <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf54category.jpg" alt="CF-54 Product" title="CF-54 Product Category"></a>
        <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-54</a></button>
    </div>
    <div class="home-grid-container__slide">
        <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf31category.jpg" alt="Cf-31 Product" title="CF-31 Product Category"></a>
        <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31">Panasonic CF-31</a></button>
    </div>
    <div class="home-grid-container__slide">
        <a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1"><img src="https://www.bobjohnson.com/product_images/uploaded_images/fzg1category.jpg" alt="FZ-G1 Product" title="FZ-G1 Product Category"></a>
        <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1">Panasonic FZ-G1</a></button>
    </div>
    <div class="home-grid-container__slide">
        <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-53"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf53category.jpg" alt="CF-53 Product" title="CF-53 Product Category"></a>
        <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-53</a><button>
    </div>
</div>

这是我的CSS：

.home-grid-container {
    background-color: #fff;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    justify-content: center;
    column-gap: 10px;
}

.home-grid-container h3 {
    color: #1f588f;
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 0 0;
    text-align: center;
    vertical-align: top;
}

.home-grid-container a {
    text-decoration: none;
    color: #fff;
}

.home-grid-container a:visited {
    color: #fff;
}

.home-grid-container button {
    margin: 1rem 0 1rem;
}

.home-grid-container__slide {
    max-height: 300px;
    max-width: 300px;
}

.homepage-category-button {
    width: 12rem;
}

英文:

I'm trying to make my 1 row grid responsive so that it will turn into multiple rows when the screen or window is smaller or shrinks, but I can't seem to figure it out. I have a feeling now that I'm this far into this that making this part of the website a grid may not have been the most optimal thing to to do, but I'm not very experienced in this field, and I'd prefer to keep it a grid for now. Regardless, no matter what I've tried the grid stays 1 row or loses it's formatting. Hopefully someone else has more knowledge in this area they wouldn't mind sharing.

Here is my HTML:

  &lt;div class=&quot;home-grid-container&quot;&gt;
    &lt;div class=&quot;home-grid-container__slide&quot;&gt;
      &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-33&quot;&gt;&lt;img src=&quot;https://www.bobjohnson.com/product_images/uploaded_images/cf33category.jpg&quot; alt=&quot;CF-33 Product&quot; title=&quot;CF-33 Product Category&quot;&gt;&lt;/a&gt;
      &lt;button class=&quot;homepage-category-button button button--primary&quot;&gt;&lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-33&quot;&gt;Panasonic CF-33&lt;/a&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;home-grid-container__slide&quot;&gt;
      &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-54&quot;&gt;&lt;img src=&quot;https://www.bobjohnson.com/product_images/uploaded_images/cf54category.jpg&quot; alt=&quot;CF-54 Product&quot; title=&quot;CF-54 Product Category&quot;&gt;&lt;/a&gt;
      &lt;button class=&quot;homepage-category-button button button--primary&quot;&gt;&lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-54&quot;&gt;Panasonic CF-54&lt;/a&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;home-grid-container__slide&quot;&gt;
      &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-31&quot;&gt;&lt;img src=&quot;https://www.bobjohnson.com/product_images/uploaded_images/cf31category.jpg&quot; alt=&quot;Cf-31 Product&quot; title=&quot;CF-31 Product Category&quot;&gt;&lt;/a&gt;
      &lt;button class=&quot;homepage-category-button button button--primary&quot;&gt;&lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-31&quot;&gt;Panasonic CF-31&lt;/a&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;home-grid-container__slide&quot;&gt;
      &lt;a href=&quot;https://www.bobjohnson.com/tablets/?_bc_fsnf=1&amp;Model=FZ-G1&quot;&gt;&lt;img src=&quot;https://www.bobjohnson.com/product_images/uploaded_images/fzg1category.jpg&quot; alt=&quot;FZ-G1 Product&quot; title=&quot;FZ-G1 Product Category&quot;&gt;&lt;/a&gt;
      &lt;button class=&quot;homepage-category-button button button--primary&quot;&gt;&lt;a href=&quot;https://www.bobjohnson.com/tablets/?_bc_fsnf=1&amp;Model=FZ-G1&quot;&gt;Panasonic FZ-G1&lt;/a&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;home-grid-container__slide&quot;&gt;
      &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-53&quot;&gt;&lt;img src=&quot;https://www.bobjohnson.com/product_images/uploaded_images/cf53category.jpg&quot; alt=&quot;CF-53 Product&quot; title=&quot;CF-53 Product Category&quot;&gt;&lt;/a&gt;
      &lt;button class=&quot;homepage-category-button button button--primary&quot;&gt;&lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-54&quot;&gt;Panasonic CF-53&lt;/a&gt;&lt;button&gt;
  &lt;/div&gt;

and here is my CSS

.home-grid-container {
    background-color: #fff;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    justify-content: center;
    column-gap: 10px;
    h3 {
        color: #1f588f;
        font-weight: 700;
        font-size: 15px;
        margin: 0 0 0 0;
        text-align: center;
        vertical-align: top;
    }

    a {
        text-decoration: none;
        color: #fff;
    }

    a:visited {
        color: #fff;
    }

    button {
        margin: 1rem 0 1rem;
    }
}

.home-grid-container__slide {
    max-height: 300px;
    max-width: 300px;
}

.homepage-category-button {
    width: 12rem;
}

答案1

得分: 1

你需要在@media中调整grid-template-columns。

在这里，我为最小的情况在home-grid-container中定义了它。第一个变化发生在600px后，992px后...

h3 {
  color: #1f588f;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 0 0;
  text-align: center;
  vertical-align: top;
}

a {
  text-decoration: none;
  color: #fff;
}

a:visited {
  color: #fff;
}

button {
  margin: 1rem 0 1rem;
}

.home-grid-container {
  background-color: #fff;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  justify-content: center;
  column-gap: 10px;
}

@media (min-width: 390px) {}

@media (min-width: 600px) {
  .home-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .home-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .home-grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1400px) {
  .home-grid-container {
    grid-template-columns: repeat(5, 1fr);
  }
}

.home-grid-container__slide,
.home-grid-container__slide img {
  max-height: 300px;
  max-width: 300px;
}

.homepage-category-button {
  width: 12rem;
}

<div class="home-grid-container">
  <div class="home-grid-container__slide">
    <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33">
      <img src="https://www.bobjohnson.com/product_images/uploaded_images/cf33category.jpg" alt="CF-33 Product" title="CF-33 Product Category">
    </a>
    <button class="homepage-category-button button button--primary">
      <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33">Panasonic CF-33</a>
    </button>
  </div>
  <!-- 这里是其他内容的HTML -->
</div>

希望这能帮助你。

英文:

you have to play with the grid-template-columns in the @media

here I defined it in home-grid-container for the smallest. First change is at 600px, after 992....

h3 {
  color: #1f588f;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 0 0;
  text-align: center;
  vertical-align: top;
}

a {
  text-decoration: none;
  color: #fff;
}

a:visited {
  color: #fff;
}

button {
  margin: 1rem 0 1rem;
}

.home-grid-container {
  background-color: #fff;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  justify-content: center;
  column-gap: 10px;
}

@media (min-width: 390px) {}

@media (min-width: 600px) {
  .home-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .home-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .home-grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1400px) {
  .home-grid-container {
    grid-template-columns: repeat(5, 1fr);
  }
}

.home-grid-container__slide,
.home-grid-container__slide img {
  max-height: 300px;
  max-width: 300px;
}

.homepage-category-button {
  width: 12rem;
}

&lt;div class=&quot;home-grid-container&quot;&gt;
  &lt;div class=&quot;home-grid-container__slide&quot;&gt;
    &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-33&quot;&gt;
      &lt;img src=&quot;https://www.bobjohnson.com/product_images/uploaded_images/cf33category.jpg&quot; alt=&quot;CF-33 Product&quot; title=&quot;CF-33 Product Category&quot;&gt;
    &lt;/a&gt;
    &lt;button class=&quot;homepage-category-button button button--primary&quot;&gt;
            &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-33&quot;&gt;Panasonic CF-33&lt;/a&gt;
        &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class=&quot;home-grid-container__slide&quot;&gt;
    &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-54&quot;&gt;
      &lt;img src=&quot;https://www.bobjohnson.com/product_images/uploaded_images/cf54category.jpg&quot; alt=&quot;CF-54 Product&quot; title=&quot;CF-54 Product Category&quot;&gt;
    &lt;/a&gt;
    &lt;button class=&quot;homepage-category-button button button--primary&quot;&gt;
            &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-54&quot;&gt;Panasonic CF-54&lt;/a&gt;
        &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class=&quot;home-grid-container__slide&quot;&gt;
    &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-31&quot;&gt;
      &lt;img src=&quot;https://www.bobjohnson.com/product_images/uploaded_images/cf31category.jpg&quot; alt=&quot;Cf-31 Product&quot; title=&quot;CF-31 Product Category&quot;&gt;
    &lt;/a&gt;
    &lt;button class=&quot;homepage-category-button button button--primary&quot;&gt;
            &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-31&quot;&gt;Panasonic CF-31&lt;/a&gt;
        &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class=&quot;home-grid-container__slide&quot;&gt;
    &lt;a href=&quot;https://www.bobjohnson.com/tablets/?_bc_fsnf=1&amp;Model=FZ-G1&quot;&gt;
      &lt;img src=&quot;https://www.bobjohnson.com/product_images/uploaded_images/fzg1category.jpg&quot; alt=&quot;FZ-G1 Product&quot; title=&quot;FZ-G1 Product Category&quot;&gt;
    &lt;/a&gt;
    &lt;button class=&quot;homepage-category-button button button--primary&quot;&gt;
            &lt;a href=&quot;https://www.bobjohnson.com/tablets/?_bc_fsnf=1&amp;Model=FZ-G1&quot;&gt;Panasonic FZ-G1&lt;/a&gt;
        &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class=&quot;home-grid-container__slide&quot;&gt;
    &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-53&quot;&gt;
      &lt;img src=&quot;https://www.bobjohnson.com/product_images/uploaded_images/cf53category.jpg&quot; alt=&quot;CF-53 Product&quot; title=&quot;CF-53 Product Category&quot;&gt;
    &lt;/a&gt;
    &lt;button class=&quot;homepage-category-button button button--primary&quot;&gt;
            &lt;a href=&quot;https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&amp;Model=CF-54&quot;&gt;Panasonic CF-53&lt;/a&gt;
        &lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何使此网格响应式，特别是针对移动设备和较小屏幕。

问题

答案1

I have a problem with CSS GRID on FORMs which have FIELDSETs in them – GRID ends up on both parent and child and then breaks

隐藏元素在预览图片之后。

webpack 分别编译每个 SCSS 和 JS 文件。

如何使用Beautiful Soup检索具有多个属性的对象？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论