html - 基于设备的不同列数

Question

我正在尝试根据设备创建不同数量的列。

例如:在移动设备上我想要2-col 布局，而在桌面上我想要4-col 布局等...

我尝试过使用 minmax() 来解决问题，但无法按照我想要的方式实现，关于使用 minmax() 实现此目的的任何建议。

有人知道答案吗？

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
</div>

Answer 1

无论您是否必须使用媒体查询并定义您的每一列，都不确定您想要如何布局您的网格。

例子:

div class="col one">1</div>

div class="col two">2</div>

这是移动布局

   .wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-areas:
     "header"
     "sidebar"
     "content"
     "sidebar2"
     "footer"
    }

这是平板电脑布局

    @media only screen and (min-width: 500px)  {
    .wrapper {

        grid-template-columns: 20% auto;
        grid-template-areas:
    "header   header"
        "sidebar  content"
        "sidebar2 sidebar2"
        "footer   footer";
    }
    }

这是桌面布局

    @media only screen and (min-width: 600px)   {
        .wrapper {
      grid-gap: 20px;
            grid-template-columns: 120px auto 120px;
            grid-template-areas:
      "header  header  header"
            "sidebar content sidebar2"
            "footer  footer  footer";
            max-width: 600px;
        }
    }

这里是一个使用 CSS 网格和媒体查询的例子。在这个例子中，box后面跟着一个独特的 div类(class)名称。您可以使用该类名称来布置网格。

body {
  margin: 40px;
}

.sidebar {
        grid-area: sidebar;
    }

    .sidebar2 {
        grid-area: sidebar2;
    }

    .content {
        grid-area: content;
    }

    .header {
        grid-area: header;
    }

    .footer {
        grid-area: footer;
    }

    .wrapper {
        background-color: #fff;
        color: #444;
    }

  .wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-areas:
     "header"
     "sidebar"
     "content"
     "sidebar2"
     "footer"
  }

    @media only screen and (min-width: 500px)  {
    .wrapper {

        grid-template-columns: 20% auto;
        grid-template-areas:
    "header   header"
        "sidebar  content"
        "sidebar2 sidebar2"
        "footer   footer";
    }
    }

    @media only screen and (min-width: 600px)   {
        .wrapper {
      grid-gap: 20px;
            grid-template-columns: 120px auto 120px;
            grid-template-areas:
      "header  header  header"
            "sidebar content sidebar2"
            "footer  footer  footer";
            max-width: 600px;
        }
    }

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%; 
}

.header,
.footer {
  background-color: #999;
}

.sidebar2 {
  background-color: #ccc;
  color: #444;
}

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box sidebar2">Sidebar 2</div>
  <div class="box content">Content
    <br /> More content than we had before so this column is now quite tall.</div>
  <div class="box footer">Footer</div>
</div>