相关疑难解决方法(0)

我需要实现一个相当普遍的磨坊砌体布局.但是,出于多种原因,我不想使用JavaScript来执行此操作.

参数:

• 所有元素都具有相同的宽度
• 元素的高度无法在服务器端计算(图像加上各种文本量)
• 如果必须的话,我可以使用固定数量的列

有这一个简单的解决方案,在现代浏览器,工作的column-count性质.

该解决方案的问题是元素按列排序:

虽然我需要按行排序元素,至少大约:

我试过的方法不起作用:

• 制作物品display: inline-block:浪费垂直空间.
• 制作物品float: left:lol,没有.

现在我可以更改服务器端渲染并重新排序项目数除以列数的项目,但这很复杂,容易出错(基于浏览器决定将项目列表拆分成列的方式),所以我想要尽可能避免它.

是否有一些新奇的flexbox魔法可以实现这一目标？

我正在玩CSS网格布局,并遇到了一个我无法找到答案的问题.

请考虑以下示例:

:root {
  --grid-columns: 12;
  --column-gap: 10px;
  --row-gap: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), calc(100% / var(--grid-columns)));
  grid-column-gap: var(--column-gap);
  grid-row-gap: var(--row-gap);
  justify-content: center;		
} 

[class*=l-] {
  border: 1px solid red;
}

.l-1 {
  grid-column-start: span 1;		
}

.l-2 {
  grid-column-start: span 2;
}

.l-3 {
  grid-column-start: span 3;
}

.l-4 {
  grid-column-start: span 4;
}

.l-5 {
  grid-column-start: span 5;
}

.l-6 {
  grid-column-start: span 6;
}

.l-7 {
  grid-column-start: span 7;
}

.l-8 {
  grid-column-start: span …

我正在尝试使用CSS网格创建一个表,基于内容使用相等的列.我想避免使用<table>.这是此问题的后续问题:使用CSS网格自动调整列

我想要实现的目标:

此表有效:https://codepen.io/anon/pen/baExYw

但是我想把每一行包裹起来div,这不足为奇地打破了桌子.

该表格已破:https://codepen.io/anon/pen/qpbMgG

app.html

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>

app.css

.wrapper …