新手的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個(gè)，只進(jìn)行了簡(jiǎn)單的grid的布局其中的一個(gè)小的布局方式，grid的布局遠(yuǎn)不止這些，在現(xiàn)在的主流布局方式有g(shù)rid外還有felxbox等。
在日常網(wǎng)頁(yè)布局中這2者不是相互排斥的，我們?cè)谌粘５膶W(xué)習(xí)中要學(xué)會(huì)用好這2個(gè)布局，
- grids 適用于大畫面的布局。
- Flexbox 來(lái)定位設(shè)計(jì)上一些較小的細(xì)節(jié)。
- Flexbox 適用于單一維度的布局，軸。
轉(zhuǎn)載于:https://www.cnblogs.com/mumu597/p/9733014.html
總結(jié)
- 上一篇： T-80BVM主战坦克？
- 下一篇： 【转】王晟教授：给光纤3室研究生的一封公