标签: grid-layout

我有一个简单的flex-box布局,其容器如下:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

现在我希望最后一行中的项目与另一行对齐.justify-content: space-between;应该使用,因为可以调整网格的宽度和高度.

目前它看起来像

在这里,我希望右下角的项目位于"中间列"中.实现这一目标的最简单方法是什么？这是一个显示此行为的小jsfiddle.

.exposegrid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div> …

我必须使用网格在Android中实现Photo Browser,我想知道GridView和GridLayout之间的区别.

我正在使用GridView动态显示图像.

我确信这个问题有一个简单的解决方案.基本上,如果我有两列,我怎么能在它们之间添加空格？

例如,如果html是:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

输出只是两列,彼此相邻,占据了页面的整个宽度.假设宽度设置为1000px每个div 都很500px宽.

如果我想要100px两者之间的空间我怎么能实现这个？显然,通过bootstrap自动调整div大小450px以补偿空间

我想知道如何创建一个响应方块的布局.每个正方形都有垂直和水平对齐的内容.具体示例如下所示......

TL; DR:table-layout: fixed CSS网格有什么相似之处吗？

我尝试创建一个带有大型4x3网格的年视图日历,其中包含7x6网格.

日历应填充页面,因此年份网格容器的宽度和高度均为100%.

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}

这是一个有效的例子:https://codepen.io/loilo/full/ryXLpO/

为简单起见,该笔每个月都有31天,周一开始.

我还选择了一个可笑的小字体来演示这个问题:

网格项(=日单元格)非常精简,因为页面上有数百个.一旦日期数字标签变得太大(可以使用左上方的按钮随意使用笔中的字体大小),网格的大小将会增大并超过页面的主体大小.

有什么方法可以防止这种行为吗？

我最初声明我的年度网格在宽度和高度上都是100%,所以这可能是重要的一点,但我找不到任何符合网格的CSS属性.

免责声明:我知道有很简单的方法可以在不使用CSS Grid Layout的情况下设置日历的样式.然而,这个问题更多的是关于该主题的一般知识而不是解决具体的例子.

我无法弄清楚如何制作这样的bootstrap列:

col 3 | col 4.5 | col 4.5 

我认为使用Flexbox是不可能实现的,因为每行只能是适合其元素所需的最小高度,但是可以使用较新的CSS Grid实现吗？

为了清楚起见,我希望所有行中网格中的所有元素具有相同的高度,而不是每行.基本上,最高的"细胞"应该决定所有细胞的高度,而不仅仅是其行中的细胞.

[注意:对于那些可能会将此问题与"为什么不使用表格进行HTML布局"混淆的人,我不是在问这个问题.我问的问题是为什么网格布局与表格布局根本不同.

我正在为一个项目研究CSS库(特别是Bootstrap).我是程序员而不是网页设计师,我觉得我可以从一个封装好设计的库中受益.

我们都知道使用HTML表来完成基本的站点布局是不好的做法,因为它将表示与内容混合在一起.CSS库(如Bootstrap)提供的一个好处是它们能够在不使用表的情况下创建"网格"布局.但是,我有点麻烦,了解他们的网格布局与等效表格布局有何不同之处.

换句话说,这两个HTML示例之间的根本区别是什么？我认为网格布局只是一个具有其他名称的表格,我错了吗？

<div class="row">
    <div class="span16"></div>
</div>

<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

和

<table>
  <tr>
    <td colspan=4></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

我有一堆相同大小的块设置display:inline-block在div内部,text-align:center设置为对齐块.

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

这些块水平填充div,随着浏览器窗口缩小,一些块会断开到新行,从而创建更多行和更少列.我希望所有内容仍然保持居中,最后一行与左边齐平,如下所示: …

我有两个相同大小的列(.col-xs-12),当屏幕大小与移动设备的大小相对应时,我会更改它们的位置.我会按相反的顺序放置它们.

我已经读过push和pull bootstrap指令有助于实现这一点,但是是否可以使用以下类更改两个相同大小的列的位置？

div.col-xs-12.col-xs-push-12
  p test1
div.col-xs-12.col-xs-pull-12
  p test2