使用纯CSS创建CSS网格布局

我试图创建一个布局使用 CSS 网格像图像(任何项目是正方形):

我试图创建一个布局使用 CSS 网格像图像(任何项目是正方形):

CSS grid layout pattern

我正在尝试的代码:

CSS公司

  .grid-container {
    padding: 20px;
    display: grid;
    grid-gap: 20px;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(2, 1fr);
  }
  .item {
    position: relative;
    background: #ccc;
  }
  /* Square */
  .item:after {
    content: '';
    display: block;
    padding-top: 100%;
  }
  @media screen and (min-width: 640px) and (max-width: 1023px) {
    /* 640 ~ 1023 */
    .grid-container {
      grid-template-columns: repeat(3, 1fr);
    }
    .item:nth-child(6n + 1) {
      grid-column: span 2 / 3;
      grid-row: span 2;
    }
    .item:nth-child(6n + 6) {
      grid-column: span 2 / 3;
      grid-row: span 2;
      grid-column: 2 / 4;
    }
    .item:nth-child(6n + 5) {
      grid-column: span 1 / 2;
    }
  }
  @media print, screen and (min-width: 1024px) {
    /* 1024+ */
    .grid-container {
      grid-template-columns: repeat(4, 1fr);
    }
    .item:nth-child(10n + 1) {
      grid-column: span 2 / 3;
      grid-row: span 2;
    }
    .item:nth-child(10n) {
      grid-column: span 2 / 3;
      grid-row: span 2;
      grid-column-end: 5;
    }
    .item:nth-child(10n + 8) {
      grid-column-start: 1;
    }
  }

你可以在这里找到我的代码:JSFiddle

Result show: CSS grid layout pattern

我认为使用position: absolute与计算网格位置的 JavaScript 可以解决问题。

如何使用纯 CSS 创建这个布局?

8

你可以像一样尝试。你几乎很好,缺少grid-auto-flow:dense;以允许该项目填充所有空格。

.grid-container {
  padding: 20px;
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow:dense;
  counter-reset: alList;
}
.item {
  aspect-ratio: 1;
  background: #ccc;
  display: flex;
}
/* Number */
.item:before {
  counter-increment: alList;
  content: counter(alList);
  margin: auto;
  font-size: 40px;
  color: #000000;
}
@media screen and (min-width: 40em) and (max-width: 63.99875em) {
  /* 640 ~ 1023 */
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .item:nth-child(6n + 1),
  .item:nth-child(6n + 6){
    grid-area: span 2/span 2;
  }
  .item:nth-child(6n + 5) {
    grid-column: 1;
  }
}
@media print, screen and (min-width: 64em) {
  /* 1024+ */
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
  .item:nth-child(10n + 1),
  .item:nth-child(10n + 10){
    grid-area: span 2/span 2;
  }
  .item:nth-child(10n + 8) {
    grid-column: 1;
  }
  .item:nth-child(10n + 9) {
    grid-column: 2;
  }
}
<div class="grid-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(718)
如何使用WinCE5.0RTOS在ATL应用程序中加载第三方.dll(COMDLL )
上一篇
Excel条件格式与空白和今天 ()
下一篇

相关推荐

  • css设置滚动条宽度设置:This is a title

    CSS设置滚动条宽度的方法:使用CSS3的。-webkit-属性:…

    2023-06-06 10:53:01
    0 84 97
  • css超出隐藏省略:爱上海,一个充满活力的城市!

    css超出隐藏省略,可以使用CSS的text-属性来实现,具体代码如下:…

    2023-06-26 11:29:04
    0 80 70
  • css怎么让图片居中显示:使用CSS实现图片居中显示

    示例示例可以使用CSS的margin属性来实现图片居中显示,代码示例如下:上面的代码中,我们使用了 `margin: 0 auto;` 来让图片居中显示,其中`0`表示上下边距,`auto`表示左右边距自动调整,这样就可以让图片居中显示。…

    2023-06-26 00:45:20
    0 21 49
  • css 背景铺满:欢迎来到我的世界

    CSS 代码如下:上面的代码可以使背景图片填充整个浏览器窗口,并且保持图片的原始比例。…

    2023-10-11 10:49:49
    0 18 25
  • css 子样式:标题

    CSS 子样式是指在父样式的基础上,对其子元素进行单独定义的样式。它可以使用类选择器、ID 选择器或者属性选择器来定义,如下所示:…

    2023-04-13 14:42:51
    0 91 34
  • css 间隔:如何利用 CSS 进行间隔调整

    示例示例CSS 间隔是指在 CSS 中使用的间距属性,它可以用来设置元素之间的距离。有几种常用的 CSS 间隔属性,包括:…

    2023-06-05 02:47:09
    0 14 26
  • css导入字体:标题

    示例示例CSS导入字体可以通过@font-face规则来实现,代码示例如下:…

    2023-04-22 12:42:42
    0 25 66
  • cssci与sci的区别比较两者在科学研究中的作用

    CSSCI(中国社会科学引文索引)是中国社会科学院出版社编辑的中国社会科学文献引文索引,收录中国社会科学领域的期刊文献及其他文献,主要收录中国社会科学领域的期刊文献,也收录部分论文集、学位论文及其他文献。…

    2023-11-15 05:05:39
    0 40 40

发表评论

登录 后才能评论

评论列表(85条)