CSS 网格在缩小 window 时分崩离析 - "fixed position" 有问题？

Question

我是网络编程的新手，我正在尝试从头开始构建一个可以响应的静态艺术作品集网站。有人推荐我使用我喜欢的布局想使用 CSS Grid，我还使用 flexbox 将容器组合到其中的内容。我网站的结构如下：

导航栏
页眉
内容

Image of the concept of my website

基本上我希望横向垂直导航栏处于固定位置，这样用户可以在保持在同一位置的同时向下滚动。我确实使用属性 position: fixed 实现了这一点，但我相信这可能是 网格的一部分，它没有在导航栏内进行调整，并且在更改尺寸时被推到右侧window 和“内容”中的图库在导航栏下方移位。 受影响的元素是“内容”（请原谅名称/单词的重复）。 此问题主要发生在基于 Chromium 的浏览器上。

所以基本上称为“content”的网格元素和该结构中的项目（使用 flexbox）都有问题。

到目前为止我尝试了什么：

我在 CSS 中也建立了一些@media 属性用于调整导航栏同时缩小。我试着看看是否删除那个属性会解决问题，但问题还是一样。
我尝试删除我放在“内容”中的画廊，看看是否这解决了问题，但没有。

老实说，我真的不知道该怎么做才能解决这个问题。发生的事情可能很愚蠢，但我不知道如何解决它。

我网站中的代码：

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    background-color: none;
    font-family: 'Raleway', sans-serif;
    scroll-behavior: smooth;

    

    /* Adjust font size */
    -webkit-text-size-adjust: 100%;

    /* Font variant */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;

    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.7px;
    
    @-webkit-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-moz-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
    
    
    
    
}



/* Basic structure */




.grid {
    animation: fadein 2s;
    
}


@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

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






#navbar {

    background-color: #3c5d79;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 1;
    padding: 3vw;
    align-content: center;
    text-align: center;
    color: #f4d3cc;
    height: 100vh;
    width: 40vh;
    position: fixed;
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
}





#header2 {

    background-color: #f2f2f5;
    grid-row-start: ;
    grid-column-start: 2;

    grid-row-end: 2;
    grid-column-end: 6;
    height: 15vh;

}


#header {

    background-color: #f4d3cc;
    grid-row-start: ;
    grid-column-start: 2;

    grid-row-end: 2;
    grid-column-end: 6;
    height: 15vh;

}



#content {

    background-color: #f2f2f5;


    grid-row-start: 2;
    grid-column-start: 2;
    height: 100%;

    grid-row-end: 3;
    grid-column-end: 6;

}






/* styling */

/* -------NAVBAR STYLING START-------- */


a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: inherit;
}


a:hover {
    color: white;
}
a {
    transition: color 500ms ease 0.1s;
}


.contnav {

    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    padding-top: 20%;
    text-align: center;
    align-content: center;
    line-height: 30px;
    color: #f4d3cc;

}


/* Line height is provoking the grid to break */


.work-nav {


    margin-top: 15%;
    margin-bottom: 5%;
    font-weight: 700;
    font-size: 13px;
    color: #f4d3cc;


}


.logo-nav {

    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: #f4d3cc;

}


.divbar {

    border-top: 1.5px solid #bbb;
    margin: 15px;
    height: 0px;
    color: #3c5d79;

}


.divbar1 {

    border-top: 2px solid #bbb;
    margin: 27px;


}



.items-nav {
    
}



.items-nav2 {


    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    padding-top: 100px;

}


.division {

    padding: 10px;
}


.info-nav2 {


    font-weight: 700;


}




.icons {

    display: flex;
    align-items: center;
    padding-top: 70%;
    justify-content: space-around;



}


.circle1 {

    width: 10px;
    height: 10px;
    background: #f4d3cc;
    border-radius: 50%
}



.circle2 {

    width: 10px;
    height: 10px;
    background: #f4d3cc;
    border-radius: 50%
}


.circle3 {

    width: 10px;
    height: 10px;
    background: #f4d3cc;
    border-radius: 50%
}


/* -------NAVBAR STYLING END-------- */











/* -------HEADER STYLING START-------- */




.navmarg {
    
    padding-left: 20px;
    
}

.info-header2 {


    padding-top: 25px;
    display: flex;
    margin: 20px;
    font-size: 1.3rem;
    font-weight: 300;
    color: #3c5d79;


}


.info-header {


    margin-top: 34px;
    margin-bottom: 34px;
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 300;
    color: #3c5d79;


}



/* -------HEADER STYLING END-------- */
















/* -------CONTENT STYLING START-------- */




.contbox {

    display: flex;
    align-content: center;
    margin: 1vh;
    color: #595959;
    display: flex;
    margin: 15px;
    padding: 2%;
    font-size: 1rem;
    margin-left: 10%;
    margin-right: 10%;
}


/* -------CONTENT STYLING END-------- */




/* -------GALLERY-------- */



.gallery-container {
    
    display: flex;
    align-content: center;
    padding-left: 30px;
}


.image-gallery {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 50px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    grid-gap: 20px;
}

.image-gallery .image-box {
    position: relative;
    background-color: #d7d7d8;
    overflow: hidden;
}

.image-gallery .image-box:nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

.image-gallery .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: all 0.5s ease;
}

.image-gallery .image-box:hover img {
    transform: scale(1.1);
}

.image-gallery .image-box .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fafafaf2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 1;
}

.image-gallery .image-box:hover .overlay {
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    opacity: 1;
}

.image-gallery .image-box .details {
    text-align: center;
}

.image-gallery .image-box .details .title {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    top: -5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.image-gallery .image-box .details .category {
    font-size: 18px;
    font-weight: 400;
    position: relative;
    bottom: -5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.image-gallery .image-box:hover .details .title {
    top: 0px;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s 0.2s ease;
}

.image-gallery .image-box:hover .details .category {
    bottom: 0;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s 0.2s ease;
}

.image-gallery .image-box .details .title a,
.image-gallery .image-box .details .category a {
    color: #222222;
    text-decoration: none;
}

/* Let's make it responsive */
@media (max-width: 768px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-auto-rows: 250px;
    }

    .image-gallery .image-box:nth-child(7n + 1) {
        grid-column: unset;
        grid-row: unset;
    }
}



 @media screen and (max-width: 1200px) {
    #navbar {
      width: 26%;
    }
    #navbar .logo-nav {
      font-size: 100% !important;
    }
     
     #navbar li {
         
         font-size:100%; !important;
     }
  
    .d {
      display: none;
    }
  }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inicio - Portfolio</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/java.js"></script>
</head>

<body>
    <div class="grid">


        <div id="navbar">


            <div class="logo-nav"><a href="#">PORTFOLIO</a></div>
            <div class="divbar1"></div>

            <div class="contnav">


                <div class="work-nav">WORK</div>


                <div class="items-nav">

                    <ul>
                        <li><a href="#"><i class="Animation"></i>Animation</a></li>
                        <li><a href="#"><i class="Rough"></i>Rough</a></li>
                        <li><a href="#"><i class="Original Art"></i>Original Art</a></li>
                        <li><a href="#"><i class="Graphic Design"></i>Graphic Design</a></li>
                        <li><a href="#"><i class="Character design"></i>Character Design</a></li>
                    </ul>

                </div>





                <div class="items-nav2">
                    <ul>
                        <li>
                            <div class="info-nav2"><a href="#">About me</a></div>
                        </li>


                        <li><a href="#"><i class="contact"></i>Contact</a></li>
                    </ul>

                    
                    
                    
                    
                    <div class="icons">

                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>

                    </div>
                </div>


            </div>
        </div>


        <!--<div id="header2">
            <div class="navmarg">
                <p class="info-header2">ORIGINAL ART</p>
                <div class="divbar"></div>
            </div>
        </div>-->
        
        
        <div id="header">
            <p class="info-header">WORK</p>
        </div> -->


        <div id="content">

            <!--  <div class="contbox">
                00
                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pjjjariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                
            </div> -->

<div class="gallery-container">
            <div class="image-gallery">
                <div class="image-box">
                    <img src="images/5.png" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Original Art</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/2.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/3.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/7.png" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/11.png" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/6.png" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/4.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/img-5.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/img-6.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/img-4.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/img-10.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/img-7.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
</div>


        </div>
    </div>
</body>

</html>

Answer 1

这将是我的方法：

媒体查询用于增加复杂性而不是消除它
使用 grid 和 flex 代替绝对定位
我已经为你的颜色设置了一些自定义道具，但你必须完成并完成它

@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
  --headerBackground: #3c5d79;
  --headerText: #f4d3cc;
  --mainBackground: #f2f2f5;
  --mainHeaderBackground: #f4d3cc;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  background-color: none;
  font-family: "Raleway", sans-serif;
  scroll-behavior: smooth;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.7px;
}

a:link,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: white;
}

a {
  transition: color 500ms ease 0.1s;
}

body {
  display: grid;
}

.main-header {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
  padding: 3vw;
  background-color: var(--headerBackground);
  color: var(--headerText);
}

.main-header h1 {
  font-weight: 700;
  font-size: 1.5rem;
  padding: 1.3em;
  border-bottom: 1.5px solid #bbb;
}

.main-header li {
  padding-block: 1em;
}

.main-header li li {
  padding-block: 0.5em;
}

.main-header .icons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.main-header .circle {
  width: 10px;
  height: 10px;
  background: #f4d3cc;
  border-radius: 50%;
}

.info-header {
  font-size: 2.5rem;
  font-weight: 300;
  text-align: center;
  padding: 2rem;
  background-color: var(--mainHeaderBackground);
  color: #3c5d79;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  margin: 0 auto;
  padding: 4rem 2rem;
  grid-gap: 1.5rem;
}
.image-gallery .image-box:nth-child(7n + 1) {
  grid-area: span 2 / span 2;
}
.image-box {
  position: relative;
  background-color: #d7d7d8;
}
.image-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-box .overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  transition: all 0.5s ease;
  opacity: 0;
  background-color: #fafafaf2;
  color: #222;
  text-align: center;
}
.image-box:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.image-box:hover .overlay {
  opacity: 1;
}
@media (min-width: 50rem) {
  body {
    grid-template-columns: 1fr 3fr;
    max-height: 100vh;
  }
  header {
    max-height: 100vmax;
  }
  main {
    max-height: 100vh;
    overflow: auto;
  }
}

    <header class="main-header">
      <h2 class="logo-nav"><a href="#">PORTFOLIO</a></h2>
      <nav>
        <ul class="contnav">
          <li>
            <h2 class="work-nav">WORK</h2>
            <ul>
              <li>
                <a href="#"><i class="Animation"></i>Animation</a>
              </li>
              <li>
                <a href="#"><i class="Rough"></i>Rough</a>
              </li>
              <li>
                <a href="#"><i class="Original Art"></i>Original Art</a>
              </li>
              <li>
                <a href="#"><i class="Graphic Design"></i>Graphic Design</a>
              </li>
              <li>
                <a href="#"><i class="Character design"></i>Character Design</a>
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li>
                <div class="info-nav2"><a href="#">About me</a></div>
              </li>
              <li>
                <a href="#"><i class="contact"></i>Contact</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <div class="icons">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
      </div>
    </header>
    <main>
      <header class="info-header">
        <h2>WORK</h2>
      </header>
      <section class="image-gallery">
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
      </section>
    </main>

CSS 网格在缩小 window 时分崩离析 - "fixed position" 有问题？

CSS Grid is breaking apart while scaling down the window - issue with "fixed position"?

html

css

css-selectors

flexbox

css-grid

这将是我的方法：