新手的grid佈局
阿新 • • 發佈：2018-11-12
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 適用於單一維度的佈局，軸。