新手的grid布局

html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="布局grid.css">
<title>grid布局</title>
</head>
<body>
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
</body>
</html>

css部分

1.Gutters

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 1em;
}

 

2.Positioning items against lines

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

.wrapper { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: 100px; 
} 

.box1 { 
  grid-column-start: 1; 
  grid-column-end: 4; 
  grid-row-start: 1; 
  grid-row-end: 3; 
}

.box2 { 
  grid-column-start: 1; 
  grid-row-start: 3; 
  grid-row-end: 5; 
}

 

 


本次我也只是拿了老师上课讲的里面中的2个，只进行了简单的grid的布局其中的一个小的布局方式，grid的布局远不止这些，在现在的主流布局方式有grid外还有felxbox等。

在日常网页布局中这2者不是相互排斥的，我们在日常的学习中要学会用好这2个布局，

  • grids 适用于大画面的布局。
  • Flexbox 来定位设计上一些较小的细节。
  • Flexbox 适用于单一维度的布局，轴。
下次课程老师将教我们felxbox布局。对grid布局感兴趣的同学，这有个传送门：http://devdocs.io/css/css_grid_layout/basic_concepts_of_grid_layout
也希望大家可以给我指点指点，谢谢大家。
posted @ 2018-10-15 13:09  图南本南  阅读(250)  评论(0)    收藏  举报