Html 构建可调css网格

我试图建立“可调整”的css网格。我正在制作我的博客，我希望我的新闻以“块”的形式显示，并以如下方式放置：

而不是像我做的那样

这是我的代码。
HTML

<div id="wrapper">
    <div class="d_1">1</div>
    <div class="d_2">2</div>
    <div class="d_3">3</div>
    <div class="d_4">4</div>
    <div class="d_5">5</div>
    <div class="d_6">6</div>

</div>

#wrapper{
    width:200px;

}
#wrapper div{
    background-color:lightgray;
    width:50px;

    float:left;
    margin:0px 5px 5px 0px;
}
.d_1{
    height:60px;
}
.d_2{
    height:30px;
}
.d_3{
    height:33px;
}
.d_4{
    height:70px;
}
.d_5{
    height:60px;
}
.d_6{
    height:40px;
}

---

如果您不关心旧浏览器的支持（不适用于IE9或更高版本），则可以使用并将其设置为3列，对div进行垂直排序：

将此添加到

#包装器中

：

-webkit-column-count: 3;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-fill: auto;
column-count: 3;
column-fill: auto;

然后替换

float:左在您的
#包装器div中通过
显示：内联块

这是一本书


注意：如果浏览器支持和div顺序很重要，那么可以在此StackOverFlow帖子中找到一个优雅的解决方案：
警告：

我现在在CSS和JS方面不是最好的。我倾向于对事情施加暴力，直到它们起作用为止。我很确定这不是最好的解决方案，但是，我想发布它，以便其他人可以改进它。我不知道，一旦所有内容都放进去，它可能就不起作用了，也可能没有响应功能，或者可能不够动态，无法解决问题。我确实知道，问题的期望外观是通过这种方法实现的，现在，没有内容等

我欢迎任何和所有关于为什么这不是最好的和/或它有什么问题的反馈，以便我可以学习

话虽如此，但问题是：


HTML

JS

您知道有一个实际的“css网格”可以使用吗？它在IE中还不太管用（确实管用，但只是有点管用），但在所有其他相关浏览器中都很管用。基本上，您可以指定网格线，然后将要放置的框放置在其中。
我做了一个密码笔，所以你可以看到它的行动。（哦，不需要javascript）


我很确定这正是你想要的。你们甚至可以搞乱数字的顺序（以防你们想重新排列你们的博客文章或图片），你们可以很容易地添加。您甚至有“网格模板区域”：它允许您指定每个项目的确切位置。不再对位置进行黑客攻击

祝你好运！如果这有帮助，请正确标记。
（另一方面，如果你需要更多关于网格的信息，一位大力推动这项工作的人（Rachel Andrew）制作了一个教程：）
我想，仅仅使用一种已知的布局模式（flexbox、网格布局、内联等）或使用CSS列是不可能获得期望的结果的。每一个解决方案都会导致不想要的结果
但是，您可以使用CSS网格布局和Javascipt代码的组合来获得结果

这是包装CSS样式块：

#wrapper{
    width: 200px; /* CSS grid-layout will expand contained divs to cover this size */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* "1fr" for each column */
    grid-column-gap: 10px;
    grid-row-gap: 5px;
}

这是Javascript代码（在#wrapper关闭后添加）：

在和中测试代码

代码计算每行中最高块与行中其他块之间的间隙（计算间隙）；之后，将间隙应用为CSS边距顶部。间隙与前面的间隙相加（合成间隙）

我希望这能回答你的问题。
这似乎与另一个主题类似：

我完全同意@Quibble的观点。
他基本上使用了你想要的布局。我做了一个不同的，它只是有一个不同的方法，虽然领域是更优雅的方式。需要记住的是，您可以通过几种方式来实现，其中没有一种方式涉及基于JS的编码。我的

“左侧浮动框将向左移动，直到其最左侧的边距边缘（或边距不存在时的边框边缘）接触包含块的边缘或另一个浮动框的边缘”-框4在到达左侧边距之前与框1发生碰撞。如果翻转高度2和3，将看到框4停在框2，而不是框1。它从方框3的底部开始，开始向左滑动，直到碰到什么东西为止。我想看到一个解决方案来解决这个问题。是否有一个网站，显示您共享的演示照片的工作版本？如果是这样，请分享，我们可以只看代码和副本。我没有演示给你看，我是建立自己的博客。Sorry@Riki你在其他地方见过吗？@hopkins matt我不这么认为，我只是想出了这个主意，我不知道怎么做，所以我想你们中的一些人有一些想法可以帮助我，嗯，我不认为这是我想要的。你能再次检查一下它应该是什么样子，如果你的意思是divs顺序很重要，那么，根据；我的解决方案只能使用额外的JS代码来重新排序div。你也可以找到有用的答案来回答你在这方面的努力。这很好，但问题是。在我的博客上，我会有很多这样的“块”，而不仅仅是6块或4块。另外，我添加类只是因为我想给每个div分配不同的高度，但在我的页面上，div的高度将等于将要显示的图像。这可以使它不仅适用于6，而且适用于无限div吗？非常感谢你
#wrapper{
    width:200px;
}
#wrapper div{
    background-color:lightgray;
    width:50px;
    position:relative;
    margin:0px 5px 5px 0px;
}
.d_1{
    height:60px;
}
.d_2{
    height:30px;
}
.d_3{
    height:33px;  
} 
.d_4{
    height:70px;
}
.d_5{
    height:60px;
}
.d_6{
    height:40px;
}

var d1 = document.getElementById('d1');
var d1Loc = d1.getBoundingClientRect();
var d2 = document.getElementById('d2');
var d2Loc = d2.getBoundingClientRect();
var d3 = document.getElementById('d3');
var d3Loc = d3.getBoundingClientRect();
var d4 = document.getElementById('d4');
var d4Loc = d4.getBoundingClientRect();
var d5 = document.getElementById('d5'); 
var d5Loc = d5.getBoundingClientRect();
var d6 = document.getElementById('d6');
d2.style.left = d1Loc.right -5+ "px";
d2.style.top = - d1.offsetHeight - 5 + "px";
d3.style.left = d2Loc.right + d1Loc.right -10 +"px";
d3.style.top = - d1.offsetHeight - d2.offsetHeight - 10 + "px";
d4.style.top = - d1.offsetHeight - d2.offsetHeight - d3.offsetHeight + 50 + "px";
d5.style.top =  - d1.offsetHeight - d2.offsetHeight - d3.offsetHeight - d4.offsetHeight + 15 + "px";
d6.style.top = - d1.offsetHeight - d2.offsetHeight - d3.offsetHeight - d4.offsetHeight - d5.offsetHeight +12.5 + "px";
d5.style.left = d4Loc.right  -5+ "px";
d6.style.left = d5Loc.right + d4Loc.right -10 + "px"; 

#wrapper{
  display:grid;
  grid-gap:10px;
  grid-template-columns:50px 50px 50px;
  grid-template-rows: 30px 3px 27px 13px 17px 40px; /*the pixels add up to the corresponding bottoms of each grid container. There are a few ways to do this but I like this one.*/
  grid-template-areas:
    /*This allows you to specify which grid blocks go where. Notice that some are repeated, this just means they span two or more grid areas. For example, box 3 is 33 px so must span one column and two rows (the 30 and 3px one)*/
    "one two three"
    "one five three"
    "one five six"
    "four five six"
    "four five ."
    "four . .";/* the . is for a blank gridspace */
}
#wrapper>div{
  background-color:gray;
}
.d_1{
  grid-area:one;
}
.d_2{
  grid-area:two;
}
.d_3{
  grid-area:three;
}
.d_4{
  grid-area:four;
}
.d_5{
  grid-area:five;
}
.d_6{
  grid-area:six;
}

#wrapper{
    width: 200px; /* CSS grid-layout will expand contained divs to cover this size */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* "1fr" for each column */
    grid-column-gap: 10px;
    grid-row-gap: 5px;
}

"strict mode";
Array.prototype.max = function() {
    return Math.max.apply(null, this);
};
function compute_gaps(a) {
    let max = a.max();
    return a.map(function(el) {
        return el - max;
    });
}
function compose_gaps(a, b) {
    return b.map(function(el, i) {
        return a[i] + el;
    });
}
var counter = 0;
var columns = 3; // number of columns
var gaps = [];
var heights = [];
for (let el of document.querySelectorAll("#wrapper > div")) {
    let colIdx = counter % columns;
    if (counter % columns === 0) {
        //compute gaps
        if (counter) gaps.push(compute_gaps(heights));
        if (gaps.length > 1) {
        gaps[gaps.length - 1] = compose_gaps(
            gaps[gaps.length - 1],
            gaps[gaps.length - 2]
        );
        }
        heights = [];
    }
    if (gaps.length) {
        el.style.marginTop = gaps[Math.floor(counter / columns - 1)][colIdx];
    }
    heights.push(el.offsetHeight); // apply gap as margin
    counter++;
}

.container {
  display: grid;
  padding: 60pt;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
  /* there are five values for five columns, each column gets a relative 
           width in relation to the grid*/
  grid-template-rows: 10% 45% 35% 10%;
  grid-column-gap: 10px;
  grid-row-gap: 5px;
  /*this means there are three rows*/
}

.container div img {
  width: 100%;
  height: 100%;
}

.main_1 {
  grid-column: 2/5;
  grid-row: 2/3;
}

.main_2 {
  grid-column: 5/8;
  grid-row: 2/3;
}

.main_3 {
  grid-column: 8/11;
  grid-row: 2/3;
}

.main_4 {
  grid-column: 2/4;
  grid-row: 3/4;
}

.main_5 {
  grid-column: 4/7;
  grid-row: 3/4;
}

.main_6 {
  grid-column: 7/11;
  grid-row: 3/4;
}

.footer {
  grid-row: 4/5;
  grid-column: 1/6;
}