时间戳

首页 > 解决方案 > 如何调整 CSS Grid 区域的大小以堆叠在小屏幕上？

html - 如何调整 CSS Grid 区域的大小以堆叠在小屏幕上？

问题描述

说，我有以下带有一些网格 CSS 的 HTML。什么是让它们在较小的屏幕（例如 360x720）上相互堆叠的好方法？

出于某种原因，我想不出一个好的方法来解决我认为他们的路线

网格模板列： minmax(min(0, 100%), 1fr)) 1fr 1fr 1fr;

可能与媒体查询有关。

我一直在阅读https://web.dev/one-line-layouts/，https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/和其他一些关于如何完成的，但出于某种原因，它使我无法理解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Grid test</title>    
    <style>
        .grid-container
        {
            display: grid;
            grid-template-columns: minmax(min(0, 100%), 1fr)) 1fr 1fr 1fr;
            grid-template-rows: repeat(3, 1fr);
            gap: 0px 0px;
            grid-template-areas:
                "Photo Intro Intro Intro"
                "Left Left Right Right"
                "Footer Footer Footer Footer";
        }
        
        .Photo { grid-area: Photo; }
        .Intro { grid-area: Intro; }        
        .Left { grid-area: Left; }
        .Right { grid-area: Right; }
        .Footer { grid-area: Footer; }
    </style>
</head>

<body>

<div class="grid-container">
  <div class="Photo">
        <img width="80%" src="x.jpg" />
  </div>
  <div class="Intro">
    <h1>Intro text</h1>
    <section>
        <p>Text.</p>
    </section>
    </div>  
  <div class="Left"><h2>Left header</h2><p>Left text</p></div>
  <div class="Right"><h2>Right header</h2><p>Right text</p></div>
  <div class="Footer"><p>Footer stuff</p></div>
</div>
</body>
</html>

标签： htmlcssflexboxcss-grid

解决方案

minmax(min(0, 100%), 1fr))无效：您需要像这样更改CSS 网格属性以获得堆叠效果：

@media (max-width: 900px) { /* Replace with 360 or whatever you intend to */
  .grid-container.grid-container { /* You can also use a parent for specificity */
      grid-template-columns: 1fr; /* One column */
      grid-template-rows: repeat(5,1fr); /* Five rows */
      grid-template-areas: "Photo" /* Stacked areas */
                           "Intro" 
                           "Left"
                           "Right"
                           "Footer";
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid test</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: minmax(min(0, 100%), 1fr)) 1fr 1fr 1fr;
      grid-template-rows: repeat(3, 1fr);
      gap: 0px 0px;
      grid-template-areas: "Photo Intro Intro Intro" "Left Left Right Right" "Footer Footer Footer Footer";
    }
    
    .Photo {
      grid-area: Photo;
    }
    
    .Intro {
      grid-area: Intro;
    }
    
    .Left {
      grid-area: Left;
    }
    
    .Right {
      grid-area: Right;
    }
    
    .Footer {
      grid-area: Footer;
    }
  </style>
</head>

<body>

  <div class="grid-container">
    <div class="Photo">
      <img width="80%" src="x.jpg" />
    </div>
    <div class="Intro">
      <h1>Intro text</h1>
      <section>
        <p>Text.</p>
      </section>
    </div>
    <div class="Left">
      <h2>Left header</h2>
      <p>Left text</p>
    </div>
    <div class="Right">
      <h2>Right header</h2>
      <p>Right text</p>
    </div>
    <div class="Footer">
      <p>Footer stuff</p>
    </div>
  </div>
</body>

</html>

推荐阅读