第二次前端作业grid布局练习

grid布局

CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统，它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是 hack 而已，并且遗漏了很多重要的功能（例如垂直居中）。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能协同工作，而且配合得非常好）。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块

Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。

CSS Grid 今年也获得了主流浏览器（Safari，Chrome，Firefox，Edge）的原生支持。

grid布局练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<style>

.wrapper {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 10px;

  grid-auto-rows: minmax(100px, auto);

}

.one {

  grid-column: 1 / 3;

  grid-row: 1;

}

.two {

  grid-column: 2 / 4;

  grid-row: 1 / 3;

}

.three {

  grid-row: 2 / 5;

  grid-column: 1;

}

.four {

  grid-column: 3;

  grid-row: 3;

}

.five {

  grid-column: 2;

  grid-row: 4;

}

.six {

  grid-column: 3;

  grid-row: 4;

}

</style>
</head>
<body>
<div class="wrapper">

<div class="one">One</div>

<div class="two">Two</div>

<div class="three">Three</div>

<div class="four">Four</div>

<div class="five">Five</div>

<div class="six">Six</div> </div>
</body>
</html>

效果如图

（颜色为浏览器自动渲染效果）

巴特西

第二次前端作业grid布局练习

最新文章

热门文章