HTML网格定位

Question

我正在尝试使用CSS在HTML中创建网格定位。我想将它用于各种对象，如图像，短语和链接。

这是我喜欢的视觉表现。颜色类似于不同的物体，因此它们全部融合在一起，“div”和“自动魔术”之间没有间距，这取决于设定的尺寸。

我真的想远离任何API，库，我更喜欢它主要是基于CSS，JS，jQuery和HTML。

http://jsfiddle.net/AeroMcDoom/quC8V/1/

这就是我所拥有的，但我是html的定位方面的新手，并且已经考虑了大约一个星期如何做到这一点。

.a {
    width: 100px;
    height: 100px;
    float:left;
    background-color:red;
}

（'。a'是1x1网格，'。b'是2x2）

Answer 1

CSS Grid是一个存在的东西。这是一个纯粹的html / css解决方案，在过去的几年中已经实现了除了肮脏的IE之外的一切。

这是一个框架生成器，但在阅读后使用它：http://www.blended-html.com/

css网格非常棒，它提供了一种非黑客攻击解决方案，可以按照您想要的任何顺序将div和其他项目放在任何地方，并准确地将它们放在您想要的位置。它比自动魔术更好。 这是来自css-grid，rachel andrew的支持者之一的教程。 https://gridbyexample.com/video/series-auto-placement-span/ 我认为视频特别适合你，但所有这些视频都很棒。

这是一个网格实例。随意更改“grid-template-areas”之后的引号中的名称和其他名称，以查看它们如何重新定位。 https://codepen.io/quibble/pen/NaKdMo

#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;
}