css 使用格网区域时，带有minmax()的响应格网不起作用

ar7v8xwq 于 2023-03-09 发布在其他

关注(0)|答案(1)|浏览(136)

我想要达到的目标

我希望实现一个具有三列和两行的响应式网格布局，其中最后一列跨越两行并包含一个图像，如下所示：

具体来说，我希望在平板设备上将图像移动到最下面一行，而在移动的设备上将所有列显示在一列中。

片剂：

移动的：

我尝试和期望发生的事情

我尝试使用grid-template-area来排列网格项，并使用minmax()函数来实现响应网格，但即使使用minmax()，我的网格也没有响应。如果可能，我希望不使用媒体查询来实现此布局。

问题是

参见：grid.layoutit

了解问题

我认为使用grid-area时会出现问题，因为它决定了网格子节点的位置和大小。当与minmax()组合时，如果子节点的宽度小于300px，则在调整窗口大小时不会换行。这是因为grid-area为子节点在网格中定义了固定位置。例如，第一个孩子.services .service1 { grid-area: 1 / 1; }被放置在第一行和第一列。
当第一个子元素service1由于minmax(300px, 1fr)而变得小于300px时，它应该回绕到第二行和第1列，这与grid-area决策相反。
那么，如何确定所有网格子节点的位置并使网格同时响应呢？因为我认为如果将minmax()和grid-area组合在一起，就无法做到这一点

代码段

<div class="services container">

        <div class="service1">
                <i class="fa-solid fa-palette fa-2x">
                </i>
                <h4>
                    Graphic Design
                </h4>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet
                expedita numquam pariatur tempora, praesentium laudantium ad, porro reprehenderit repellat aut
                perspiciatis, unde optio odio ab.</p>

        </div>
        <div class="service2">
                    <i class="fa-solid fa-gem fa-2x">
                    </i>
                                <h4>
                    Web Design
                                </h4>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente harum a illo voluptatum facere
                repudiandae voluptates optio deleniti tenetur vel accusantium sequi minima, odio minus eius veritatis
                obcaecati. Natus, similique?</p>
        </div>
        <div class="service3">
                <i class="fa-solid fa-pen-ruler fa-2x"></i>
                <h4>
                    UI and UX
                </h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis culpa minima hic est laborum
                necessitatibus rerum quidem, commodi quas iusto. Odio fuga cum perspiciatis delectus fugit quisquam
                voluptate quos rem.</p>
        </div>
        <div class="service4">

                <i class="fa-solid fa-code fa-2x"></i>
                <h4>
                    Web Development
                </h4>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae, consequatur reiciendis officia
                pariatur culpa nam tempore, dolores rem nesciunt nobis, exercitationem dolorum. Culpa, commodi facere?
                Nihil fugit id expedita laborum.</p>
        </div>

        <div class="image"><img src="assets/images/services.jpg" alt="services"></div>

    </div>

.services {
    display: grid;
    grid-template-areas:
        '. card1 card2 image . '
        '. card3 card4 image . ';
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    row-gap: 2rem;
    align-content: center;
    padding-block: 5rem;
}

.services .service1 {
    grid-area: card1;
}

.services .service3 {
    grid-area: card2;
}

.services .service2 {
    grid-area: card3;
}

.services .service4 {
    grid-area: card4;
}

.services .image {
    position: relative;
    grid-area: image;
    width: 100%;
    max-width: 800px;
    display: block;
    margin: auto;
    height: auto;
    object-fit: cover;
}

.services .image::before {
    content: "";
    position: absolute;
    display: inline-block;
    background-color: #292a2f;
    border: #10cab7 2px solid;
    top: -11%;
    left: 65%;
    width: 167px;
    height: 585px;
    z-index: -1;
}

/* grid children are also displayed with grid */
.services>div {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 50px max-content;
    align-items: start;
}

css

来源：https://stackoverflow.com/questions/75671104/responsive-grid-with-minmax-doesnt-work-when-using-grid-area

1条答案

按热度按时间

fdbelqdn1#

我总是发现用每个元素的行和列开头来操作网格更容易。在开始时可视化有点复杂，但是检查这里http://cssgridbuilder.com/。这样做的好处是，是你决定这个元素将从这里到这里，在这个媒体上，它将从这里到这里。你甚至可以重叠元素。

body {
  margin: 0;
  padding: 0;
}

.services {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  row-gap: 2rem;
}

.services .service1 {}

.services .service3 {}

.services .service2 {}

.services .service4 {}

.services .image {
  position: relative;
  width: 100%;
  max-width: 800px;
  display: block;
  margin: auto;
  height: auto;
  object-fit: cover;
}

/* grid children are also displayed with grid */

.services .service {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.services .service *:nth-child(1) {
  align-self: center;
  justify-self: center;
}

.services .service *:nth-child(2) {
  align-self: center;
  justify-self: center;
}

.services .service *:nth-child(3) {}

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

@media (min-width: 600px) {
  .services {
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .services .service1 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .services .service3 {
    grid-area: 1 / 2 / 2 / 3;
  }
  .services .service2 {
    grid-area: 2 / 1 / 3 / 2;
  }
  .services .service4 {
    grid-area: 2 / 2 / 3 / 3;
  }
  .services .image {
    grid-area: 3 / 1 / 4 / 3;
  }
  .services .service {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
}

@media (min-width: 992px) {
  .services {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    padding-block: 5rem;
  }
  .services .service1 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .services .service3 {
    grid-area: 1 / 2 / 2 / 3;
  }
  .services .service2 {
    grid-area: 2 / 1 / 3 / 2;
  }
  .services .service4 {
    grid-area: 2 / 2 / 3 / 3;
  }
  .services .image {
    grid-area: 1 / 3 / 3 / 4;
  }
  .services .service {
    column-gap: 2rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .services .service *:nth-child(1) {
    grid-area: 1 / 1 / 3 / 2;
    align-self: start;
  }
  .services .service *:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
    text-align: center;
  }
  .services .service *:nth-child(3) {
    grid-area: 2 / 2 / 3 / 3;
  }
}

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

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

<div class="services container">

  <div class="service service1">
    <svg class="expand" style="width: 48px;height: 48px" viewBox="0 0 48 48" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
            <path d="M 37,20 V 11 H 28 V 9 h 11 v 11 z"/>
            <path d="M 31,28 V 17 H 20 v -3 h 14 v 14 z"/>
            <path d="M 9,39 V 28 h 2 v 9 h 9 v 2 z"/>
            <path d="M 14,34 V 20 h 3 v 11 h 11 v 3 z"/>
            <rect width="6" height="6" x="21.274239" y="21"/>
        </svg>
    <h4>
      Graphic Design
    </h4>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora, praesentium laudantium ad, porro reprehenderit repellat aut perspiciatis, unde optio odio ab.</p>

  </div>
  <div class="service service2">
    <svg class="expand" style="width: 48px;height: 48px" viewBox="0 0 48 48" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
            <path d="M 37,20 V 11 H 28 V 9 h 11 v 11 z"/>
            <path d="M 31,28 V 17 H 20 v -3 h 14 v 14 z"/>
            <path d="M 9,39 V 28 h 2 v 9 h 9 v 2 z"/>
            <path d="M 14,34 V 20 h 3 v 11 h 11 v 3 z"/>
            <rect width="6" height="6" x="21.274239" y="21"/>
        </svg>
    <h4>
      Web Design
    </h4>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente harum a illo voluptatum facere repudiandae voluptates optio deleniti tenetur vel accusantium sequi minima, odio minus eius veritatis obcaecati. Natus, similique?</p>
  </div>
  <div class="service service3">
    <svg class="expand" style="width: 48px;height: 48px" viewBox="0 0 48 48" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
            <path d="M 37,20 V 11 H 28 V 9 h 11 v 11 z"/>
            <path d="M 31,28 V 17 H 20 v -3 h 14 v 14 z"/>
            <path d="M 9,39 V 28 h 2 v 9 h 9 v 2 z"/>
            <path d="M 14,34 V 20 h 3 v 11 h 11 v 3 z"/>
            <rect width="6" height="6" x="21.274239" y="21"/>
        </svg>
    <h4>
      UI and UX
    </h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis culpa minima hic est laborum necessitatibus rerum quidem, commodi quas iusto. Odio fuga cum perspiciatis delectus fugit quisquam voluptate quos rem.</p>
  </div>
  <div class="service service4">
    <svg class="expand" style="width: 48px;height: 48px" viewBox="0 0 48 48" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
            <path d="M 37,20 V 11 H 28 V 9 h 11 v 11 z"/>
            <path d="M 31,28 V 17 H 20 v -3 h 14 v 14 z"/>
            <path d="M 9,39 V 28 h 2 v 9 h 9 v 2 z"/>
            <path d="M 14,34 V 20 h 3 v 11 h 11 v 3 z"/>
            <rect width="6" height="6" x="21.274239" y="21"/>
        </svg>
    <h4>
      Web Development
    </h4>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae, consequatur reiciendis officia pariatur culpa nam tempore, dolores rem nesciunt nobis, exercitationem dolorum. Culpa, commodi facere? Nihil fugit id expedita laborum.</p>
  </div>

  <div class="image"><img src="https://picsum.photos/800/600" alt="services"></div>

</div>

尝试不同的分辨率。对于你的图像，我认为这将是更好地把它放在背景图像

赞(0）回复(0）举报 2023-03-09

我来回答

css 使用格网区域时，带有minmax()的响应格网不起作用

我想要达到的目标

片剂：

移动的：

我尝试和期望发生的事情

问题是

了解问题

代码段

1条答案

相关问题

热门标签

最新问答