如何使网格容器在 CSS 中响应？ [关闭]答案

【问题标题】：How to make a grid container responsive in css? [closed]如何使网格容器在 CSS 中响应？ [关闭]
【发布时间】：2021-11-07 17:16:32
【问题描述】：

我有一个网格，其中放置了 4 列和 2 行的项目。我需要让它响应。我已经搜索了互联网，但我没有得到任何东西。当我调整大小时，这些项目正在向上挤压。

我有什么：

4 列 2 行的基本网格

我想要什么：

当视口达到

代码：

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');

:root{
    --Blue: hsl(246, 80%, 60%);

    --Light_red: hsl(15, 100%, 70%);
    --Soft_blue: hsl(195, 74%, 62%);
    --Light_red: hsl(348, 100%, 68%);
    --Lime_green: hsl(145, 58%, 55%);
    --Violet: hsl(264, 64%, 52%);
    --Soft_orange: hsl(43, 84%, 65%);

    --Very_dark: hsl(226, 43%, 10%);
    --Dark_blue: hsl(235, 46%, 20%);
    --Desaturated_blue: hsl(235, 45%, 61%);
    --Pale_Blue: hsl(236, 100%, 87%);

}
html{
    min-height: 100vh;
  display: grid;
}
body{
    margin: auto;/* center !! */
    width: 90%;
    background: var(--Very_dark);
    font-family: 'Rubik',sans-serif;
}
h1,h2,h3,h4,h5,h6{
    margin: 0;
}
.container{
    width: 100%;
    height: 70vh;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: 1fr;
    grid-gap: 25px;
}
#header{
    grid-row: span 2;
    background: var(--Blue);
    color: #fff;
    position: relative;
}
#header .profile-icon{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: url('../images/image-jeremy.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#header nav{
    position: absolute;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    bottom: 0;
    left: 0;
    border-radius: 0.9rem;
    background: var(--Dark_blue);
}
#header nav ul{
    padding: 0.2rem 1.4rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
#header nav ul li{
    color: var(--Desaturated_blue);
    cursor: pointer;
    margin-top: 1.2rem;
    list-style-type: none;
}
.nav_active{
    color: var(--Pale_Blue) !important;
}
#header .inside_wrapper{
    padding: 1.8rem 1.5rem;
}
#header h4{
    font-size: 18px;
    font-weight: 400;
    margin: 2rem 0 0.3rem 0;
    color: var(--Pale_Blue);
}
#header h1{
    font-size: 48px;
    font-weight: 300;
}
/*
reusable classes*/
.grid-item{
    position: relative;
    border-radius: 1.3rem;
}
.container .inside-wrapper {
    width: 100%;
    height: 173px;
    border-radius: 0.9rem;
    background: var(--Dark_blue);
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
}
.grid-item h4{
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 1rem;
}
.grid-item h2{
    font-size: 48px;
    font-weight: 300;
    margin-bottom: 0.5rem;
}
.grid-item h5{
    font-size: 15px;
    font-weight: 400;
    color: var(--Pale_Blue);
}
.content-wrapper{
    margin: 1.3rem 1.7rem;
}
.icon{
    position: absolute;
    top: 0;
    right: 20px;
    width: 76px;
    height: 70px;
    overflow: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/*individual boxes*/
#work{
    background: var(--Light_red);
}
.icon-work{
    background: url('../images/icon-work.svg');
}
.icon-play{
    background: url('../images/icon-play.svg');
}
.icon-study{
    background: url('../images/icon-study.svg');
}
.icon-exercise{
    background: url('../images/icon-exercise.svg');
}
.icon-social{
    background: url('../images/icon-social.svg');
}
.icon-self-care{
    background: url('../images/icon-self-care.svg');
}
#play{
    background: var(--Soft_blue);
}
#study{
    background: var(--Light_red);
}
#exercise{
    background: var(--Lime_green);
}
#social{
    background: var(--Violet);
}
#self-care{
    background: var(--Soft_orange);
}
/*responsive media queries*/
@media (max-width: 760px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" type="text/css" href="./css/main.css">
  
  <title>Frontend Mentor | Time tracking dashboard</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet ???? -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>

  <div class="container">
    <div id="header" class="grid-item">
      <div class="inside_wrapper">
        <div class="profile-icon"></div>
        <h4>Report for</h4>
        <h1>Jeremy Robson</h1>
      </div>
      <nav>
        <ul>
          <li>Daily</li>
          <li class="nav_active">Weekly</li>
          <li>Monthly</li>
        </ul>
      </nav>
    </div>
    <div id="work" class="grid-item">
      <div class="icon icon-work"></div>
      <div class="inside-wrapper">
        <div class="content-wrapper">
          <h4>Work</h4><span class="three-dots-icon"></span>
          <h2>32hrs</h2>
          <h5>Last week 36hrs</h5>
        </div>
      </div>
    </div>
    <div id="play" class="grid-item">
      <div class="icon icon-play"></div>
      <div class="inside-wrapper">
        <div class="content-wrapper">
        <h4>Play</h4><span class="three-dots-icon"></span>
        <h2>10hrs</h2>
        <h5>Last week 8hrs</h5>
        </div>
      </div>
    </div>
    <div id="study" class="grid-item">
      <div class="icon icon-study"></div>
      <div class="inside-wrapper">
        <div class="content-wrapper">
        <h4>Study</h4><span class="three-dots-icon"></span>
        <h2>4hrs</h2>
        <h5>Last week 7hrs</h5>
        </div>
      </div>
    </div>
    <div id="exercise" class="grid-item">
      <div class="icon icon-exercise"></div>
      <div class="inside-wrapper">
        <div class="content-wrapper">
        <h4>Exercise</h4><span class="three-dots-icon"></span>
        <h2>4hrs</h2>
        <h5>Last week 5hrs</h5>
        </div>
      </div>
    </div>
    <div id="social" class="grid-item">
      <div class="icon icon-social"></div>
      <div class="inside-wrapper">
        <div class="content-wrapper">
        <h4>Social</h4><span class="three-dots-icon"></span>
        <h2>5hrs</h2>
        <h5>Last week 10hrs</h5>
        </div>
      </div>
    </div>
    <div id="self-care" class="grid-item">
      <div class="icon icon-self-care"></div>
      <div class="inside-wrapper">
        <div class="content-wrapper">
        <h4>Self Care</h4><span class="three-dots-icon"></span>
        <h2>2hrs</h2>
        <h5>Last week 2hrs</h5>
        </div>
      </div>
    </div>
  </div>
<!--   <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div> -->
  <script defer type="text/javascript" src="./js/main.js"></script>
</body>
</html>

现在它在桌面上运行流畅，但在移动屏幕上变成了拼图游戏；我应该在媒体查询中添加什么？

【问题讨论】：

添加你的 html 来创建一个工作演示，这样我们就可以从那里高效地帮助你。位置：绝对在屏幕上居中是旧时尚，flex 或 grid 将处理高度和边距而没有副作用。对于响应式，您可以对网格列使用 mediaquerie 或 repeat(autofit,minmax())
...这是我之前评论的一个例子：codepen.io/gc-nomade/pen/jOwmeNa
您需要在此处在您的问题中发布minimal reproducible example，并在任何其他网站上发布not a link。
在元素上使用具有 flex 属性的 flexbox。它将在 reposive 设计中进行调整

标签： css responsive-design media-queries css-grid

【解决方案1】：

为什么不只使用网格类中内置的引导程序。

.yellow {
  background:yellow;
}

.green {
  background:green;
  
}

.box {
  width:100%; 
  height:200px;
  border:1px solid #000;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
        <div class="yellow box"></div>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
        <div class="green box"></div>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
        <div class="yellow box"></div>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
        <div class="green box"></div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
        <div class="yellow box"></div>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
        <div class="green box"></div>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
        <div class="yellow box"></div>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
        <div class="green box"></div>
    </div>
</div>

【讨论】：

你的回答很好，我一直在使用 bootstrap，但是因为我想学习这个主题，所以请使用纯 css。