使用CSS网格布局放置元素的七种方法

在这里，重点将完全放在使用CSS Grid在Web上布置元素的特定方式。现在，让我们逐一检查它们。

解决浏览器对网格布局的支持

目前，网格布局尚未获得一致的浏览器支持。但是，截至2017年3月，默认情况下已发布了最新版本的Chrome和Firefox浏览器，均支持CSS Grid Layout。IE仍然支持旧的实现，Opera需要打开Experimental Web Platform标志，而Safari完全不支持。为了正确处理本文中的所有示例，建议您使用Chrome或Firefox。对于出于某种原因发现使用这些浏览器有问题的读者，我添加了一个屏幕截图，以显示每种技术的最终结果。

＃1在个别属性中指定所有内容

这是我们在以前的文章中用来放置元素的版本。此方法冗长但易于理解。基本上，使用grid-column-start/ grid-column-end和grid-row-start/ grid-row-end属性指定元素的左/右和上/下边界。如果一个元素只跨越一行或一列，则可以省略-end属性，这样就不必编写CSS了。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

在下面的演示中，使用以下CSS将元素A放置在第二行和第二列中：

<span style="color:#000000"><code class="language-css"><span style="color:#669900">.a</span> <span style="color:#999999">{</span>
  <span style="color:#990055">grid-column-start</span><span style="color:#999999">:</span> 2<span style="color:#999999">;</span>
  <span style="color:#990055">grid-column-end</span><span style="color:#999999">:</span> 3<span style="color:#999999">;</span>
  <span style="color:#990055">grid-row-start</span><span style="color:#999999">:</span> 2<span style="color:#999999">;</span>
  <span style="color:#990055">grid-row-end</span><span style="color:#999999">:</span> 3<span style="color:#999999">;</span>
<span style="color:#999999">}</span></code></span>

通过使用以下方法可以达到相同的效果：

<span style="color:#000000"><code class="language-css"><span style="color:#669900">.a</span> <span style="color:#999999">{</span>
  <span style="color:#990055">grid-column-start</span><span style="color:#999999">:</span> 2<span style="color:#999999">;</span>
  <span style="color:#990055">grid-row-start</span><span style="color:#999999">:</span> 2<span style="color:#999999">;</span>
<span style="color:#999999">}</span></code></span>

 

 

＃2使用grid-row和grid-column

即使第一个示例中的CSS可读易懂，我们也必须使用四个不同的属性来放置单个元素。除了使用四个属性，我们还可以只使用两个- grid-column和grid-row。这两个属性都将采用两个值，并用斜杠分隔，其中第一个值将确定元素的起始行，第二个值将确定元素的结束行。

 

Report Advertisement

 

这是您需要对这些属性使用的语法：

<span style="color:#000000"><code class="language-css"><span style="color:#669900">.selector</span> <span style="color:#999999">{</span>
  <span style="color:#990055">grid-row</span><span style="color:#999999">:</span> row-start / row-end<span style="color:#999999">;</span>
  <span style="color:#990055">grid-column</span><span style="color:#999999">:</span> col-start / col-end<span style="color:#999999">;</span