javascript - 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 网格是一个存在的东西。这是一个纯粹的 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;
}