有没有办法正确地将此CSS电网包装好？

发布于 2025-02-12 19:35:13 字数 2653 浏览 0 评论 0原文

我一直在使用媒体查询来使网站负责一段时间，但是我最近发现了CSS网格，我想学习如何应用它们。

我的目标是在屏幕较小时将行包裹成新的行。

问题是列确实会收缩，但是当屏幕太小时不要包裹在下面。

我已经阅读了有关CSS网格的其他一些帖子，每个人都建议使用自动拟合Minmax，但似乎不起作用，我不确定为什么。

非常感谢

/* Menu & Logo GRID Start */
.menu-logo-grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );
    grid-template-rows: 100px;
    grid-gap: 3px;
    background-color: #f1f1f1;
    grid-template-areas:
    "l l l l m m m m m m m m"
   
}
.menu-logo-grid > .menu {
    background-color: white;
    border: 1px solid black;
    grid-area: m;
}

.menu-logo-grid > .logo {
    background-color: white;
    border: 1px solid black;
    grid-area: l;
}
/* Menu & Logo GRID End */

/* Main Content GRID Start */
.grid-container {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );
    grid-template-rows: 300px 300px 300px;
    grid-gap: 3px;
    background-color: #f1f1f1;
    grid-template-areas:
    "b b b b b b b b b b b b"
    "t t t t t t s s s s s s"
    "f f f f f f f f f f f f"
   
}

.grid-container > .bio {
    background-color: white;
    border: 1px solid black;
    grid-area: b;
}

.grid-container > .things {
    background-color: white;
    border: 1px solid black;
    grid-area: t;
}

.grid-container > .skills {
    background-color: white;
    border: 1px solid black;
    grid-area: s;
}

.grid-container > .footer {
    background-color: white;
    border: 1px solid black;
    grid-area: f;
}
/* Main Content GRID End */

<html> 
  <head>
    <title>Title</title> 
    <link href="css/index.css" type="text/css" rel="stylesheet"/>
    <link href="css/flexbox.css" type="text/css" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
 
  <body>  
  <div class="menu-logo-grid"> 
    <div class="logo">Logo</div> 
    <nav class='menu'>
      
        <a class='menu' href='#'>About Me</a>
        <a class='menu' href='#'>Contact</a>
        <a class='menu' href='#'>Projects</a>
      
    </nav>
  </div>
    
  <div class="grid-container">
      <div class="bio">1</div>
      <div class="things">2</div>
      <div class="skills">3</div>
      <div class="footer">Footer</div>
  </div>
</div>
 </body>
</html>

原文

I've been using media queries to make websites responsible for a while but I recently discovered CSS grids and I wanted to learn how to apply them.

My goal is to get the rows to wrap into a new one when the screen is smaller.

The problem is that the columns do shrink but don't wrap under when the screen is too small.

I've read some other posts about CSS-Grid and everybody is suggesting to use auto-fit minmax but it doesn't seem to work I'm not sure why.

Thank you very much

/* Menu & Logo GRID Start */
.menu-logo-grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );
    grid-template-rows: 100px;
    grid-gap: 3px;
    background-color: #f1f1f1;
    grid-template-areas:
    "l l l l m m m m m m m m"
   
}
.menu-logo-grid > .menu {
    background-color: white;
    border: 1px solid black;
    grid-area: m;
}

.menu-logo-grid > .logo {
    background-color: white;
    border: 1px solid black;
    grid-area: l;
}
/* Menu & Logo GRID End */

/* Main Content GRID Start */
.grid-container {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );
    grid-template-rows: 300px 300px 300px;
    grid-gap: 3px;
    background-color: #f1f1f1;
    grid-template-areas:
    "b b b b b b b b b b b b"
    "t t t t t t s s s s s s"
    "f f f f f f f f f f f f"
   
}

.grid-container > .bio {
    background-color: white;
    border: 1px solid black;
    grid-area: b;
}

.grid-container > .things {
    background-color: white;
    border: 1px solid black;
    grid-area: t;
}

.grid-container > .skills {
    background-color: white;
    border: 1px solid black;
    grid-area: s;
}

.grid-container > .footer {
    background-color: white;
    border: 1px solid black;
    grid-area: f;
}
/* Main Content GRID End */

<html> 
  <head>
    <title>Title</title> 
    <link href="css/index.css" type="text/css" rel="stylesheet"/>
    <link href="css/flexbox.css" type="text/css" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
 
  <body>  
  <div class="menu-logo-grid"> 
    <div class="logo">Logo</div> 
    <nav class='menu'>
      
        <a class='menu' href='#'>About Me</a>
        <a class='menu' href='#'>Contact</a>
        <a class='menu' href='#'>Projects</a>
      
    </nav>
  </div>
    
  <div class="grid-container">
      <div class="bio">1</div>
      <div class="things">2</div>
      <div class="skills">3</div>
      <div class="footer">Footer</div>
  </div>
</div>
 </body>
</html>

分享到QQ

分享到微博