Question

我正在尝试处理作业，要求我创建一个响应式网格（使用媒体查询），该网格包含多达4列（列的最小宽度为300像素）而且我不允许使用任何库。

我试图查看引导网格系统并将其应用到我的代码中，但对我而言效果并不理想。我对每列最小宽度的部分以及它最多需要包含4列的事实有疑问...

也许我不太了解问题的要求...

Answer 1

这是我为您创建的基本网格布局。在992px宽的屏幕上，它开始是4列宽，然后随着屏幕变小，缩小到3、2和1列。可以轻松更改列的宽度以符合您的规格，然后您显然也可以更改媒体查询的断点。

with _set as (select 1 as n 
            union all
            select n+1 as n from _set
            where n < 100
            )
select s2.* from _set s
    join _set s2 on s.n <= s2.n

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container .col {
  background: lightblue;
}

.container .col p {
  padding: .25rem .75rem;
}


/* 2 columns (600px) */

@media only screen and (min-width:600px) {
  .container .col {
    float: left;
    width: 50%;
  }
}


/* 3 columns (768px) */

@media only screen and (min-width:768px) {
  .container .col {
    width: 33.333%;
  }
}


/* 4 columns (992px) */

@media only screen and (min-width:992px) {
  .container .col {
    width: 25%;
  }
}

https://jsfiddle.net/w5hjod0q/1/

Answer 2

我个人从未使用过Bootstrap，但在CSS中使用了display: grid;。这样做是通过告诉父元素在网格中显示子元素，您可以通过结合使用display: grid;和grid-template-columns来指定多少个子元素。此CSS属性声明要在一行中显示多少个元素，以及它们相对的比例。例如：

  .wrapper {
    display: grid;
    grid-template-columns: 1fr, 2fr, 1fr;
  }

这将显示每行三个元素，中间一个元素的大小是外部元素的两倍。下面提供了完整且有效的示例。

@media (min-width: 1281px) {
  #wrapper {
    grid-template-columns: 1fr 2fr 1fr;
  }
}
@media (max-width:1279px) {
  #wrapper {
    grid-template-columns: 1fr 1fr;
  }
}
#wrapper {
  display: grid;
}
p:nth-of-type(even) {
  background: lightgrey;
}
/*
You can of course add @media queries to make sure they work on every screen
*/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="wrapper">
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
    </div>
  </body>
</html>

如果您需要在同一行上具有相同宽度的许多元素，则还可以使用repeat(n, size)值，这与多次写入Nfr相同，但是更加干净。

如何不使用引导程序使用网格系统

2 个答案: