如何创建响应式、等宽、动态的列？

Question

此页面可以有三列或两列，具体取决于内容。当有三列时，它应该为桌面显示所有三列，然后在平板电脑和移动设备上堆叠为一列。当有两列时，它应该为桌面显示所有两列，然后在平板电脑和移动设备上堆叠为一列。但是，我无法做到这一点。相反，当有三列时，在大约 1200 像素处，第三列换行。所以它最终看起来像这样：

[1][2]
[3]

HTML

<div class="offers-wrap">
{% for offer in offers %}
 <div class="offer justify-evenly"></div>
{% endfor %}
</div>

CSS

.offers-wrap {
  display: grid;
  grid-gap: 2rem;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(auto, 350px));
  justify-content: center;
}

.offer {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

Answer 1

您需要向 css 添加一个 media-query，将 grid-columns 的宽度更改为 100%。像这样：

<style>
.offers-wrap {
  display: grid;
  grid-gap: 2rem;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(auto, 350px));
  justify-content: center;
}

.offer {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (max-width: 1129px) {
  .offers-wrap {
    grid-template-columns: repeat(auto-fit, minmax(auto, 100%));
  }
}

</style>

<div class="offers-wrap">
   <div class="offer justify-evenly">
     test
   </div>
   <div class="offer justify-evenly">
     test
   </div>
   <div class="offer justify-evenly">
     test
   </div>
</div>

Answer 2

我最后对 Yannick H 的内容做了一些扩展

.offers-wrap {
  display: grid;
  grid-gap: 2rem;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(auto, 100%));
  justify-content: center;
}

@media (min-width: 1024px) {
  .offers-wrap {
    grid-template-columns: repeat(auto-fit, minmax(auto, 275px));
  }
}

@media (min-width: 1280px) {
  .offers-wrap {
    grid-template-columns: repeat(auto-fit, minmax(auto, 375px));
  }
}

Answer 3

这是完成您所要求的一种方法：

//<![CDATA[
/* js/external.js */
let get, post, doc, htm, bod, nav, M, I, mobile, beacon, S, Q, hC, aC, rC, tC, inArray, shuffle, isNum, isInt, rand;
addEventListener('load', ()=>{
get = (url, func, responseType = 'json', context = null)=>{
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('GET', url); x.responseType = responseType;
  x.onload = ()=>{
    if(func)func.call(c, x.response);
  }
  x.onerror = e=>{
    if(func)func.call(c, {xhrErrorEvent:e});
  }
  x.send();
  return x;
}
post = function(url, send, func, responseType ='json', context = null){
  const x = new XMLHttpRequest;
  if(typeof send === 'object' && send && !(send instanceof Array)){
    const c = context || x;
    x.open('POST', url); x.responseType = responseType;
    x.onload = ()=>{
      if(func)func.call(c, x.response);
    }
    x.onerror = e=>{
      if(func)func.call(c, {xhrErrorEvent:e});
    }
    let d;
    if(send instanceof FormData){
      d = send;
    }
    else{
      let s;
      d = new FormData;
      for(let k in send){
        s = send[k];
        if(typeof s === 'object' && s)s = JSON.stringify(s);
        d.append(k, s);
      }
    }
    x.send(d);
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
beacon = function(url, send){
  let r = false;
  if(typeof send === 'object' && send && !(send instanceof Array)){
    let d;
    if(send instanceof FormData){
      d = send;
    }
    else{
      let s;
      d = new FormData;
      for(let k in send){
        s = send[k];
        if(typeof s === 'object' && s)s = JSON.stringify(s);
        d.append(k, s);
      }
    }
    r = nav.sendBeacon(url, d);
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return r;
}
S = (selector, within)=>{
  var w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  var w = within || doc;
  return w.querySelectorAll(selector);
}
hC = function(node, className){
  return node.classList.contains(className);
}
aC = function(){
  const a = [...arguments];
  a.shift().classList.add(...a);
  return aC;
}
rC = function(){
  const a = [...arguments];
  a.shift().classList.remove(...a);
  return rC;
}
tC = function(){
  const a = [...arguments];
  a.shift().classList.toggle(...a);
  return tC;
}
inArray = (mixed, array)=>{
  if(array.indexOf(mixed) === -1){
    return false;
  }
  return true;
}
shuffle = array=>{
  let a = array.slice(), i = a.length, n, h;
  while(i){
    n = Math.floor(Math.random()*i--); h = a[i]; a[i] = a[n]; a[n] = h;
  }
  return a;
}
isNum = mixed=>typeof mixed === 'number' && !isNaN(mixed); isInt = mixed=>Number.isInteger(mixed);
rand = (min, max)=>{
  let mn = min, mx = max;
  if(mx === undefined){
    mx = mn; mn = 0;
  }
  return mn+Math.floor(Math.random()*(mx-mn+1));
}
// above is a library for you to learn - below is mobile test
const wrap = I('wrap');
if(mobile){
  aC(wrap, 'mobile');
}
}); // end load

/* css/external.css */
*{
  box-sizing:border-box;
}
html,body{
  background:#ccc; margin:0;
}
#wrap{
  display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:auto; height:100vh;
}
#wrap.mobile{
  grid-template-columns:repeat(2, 1fr);
}
#wrap>div{
  display:flex; justify-content:center; align-items:center; height:100%; background:#fff; 
}
#wrap>div:nth-child(odd){
  background:#000; color:#fff;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div id='wrap'>
    <div><div>one</div></div>
    <div><div>two</div></div>
    <div><div>three</div></div>
    <div><div>four</div></div>
    <div><div>five</div></div>
    <div><div>six</div></div>
    <div><div>seven</div></div>
  </div>
</body>
</html>

请注意，我在其中放置了一个小型 JavaScript 库，以便您了解如何减少代码。该图书馆还进行了简单的移动测试。另外，请注意我必须在您的内容 <div> 中添加另一个 <div>，这样我也可以对齐文本。您会注意到实际 JavaScript 完成添加 HTML class 和 aC 在 // above is a library for you to learn - below is mobile test 评论下。

如何创建响应式、等宽、动态的列？

How to create responsive, equal width, dynamic columns?

html

css

responsive-design

css-grid