新手的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 適用于單一維度的布局，軸。
轉載于:https://www.cnblogs.com/mumu597/p/9733014.html
總結
- 上一篇： T-80BVM主战坦克？
- 下一篇： 火锅底料开了放冰箱会坏吗？