Bootstrap-v5-布局(CSS布局)
六、css布局(CSS Grid)
1、3列(Three columns)
<div class="grid"> <div class="g-col-4">.g-col-4</div> <div class="g-col-4">.g-col-4</div> <div class="g-col-4">.g-col-4</div> </div>
2、响应式(Responsive)
<div class="grid"> <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div> <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div> <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div> </div>
<div class="grid"> <div class="g-col-6">.g-col-6</div> <div class="g-col-6">.g-col-6</div> </div>
3、包装(Wrapping)
<div class="grid"> <div class="g-col-6">.g-col-6</div> <div class="g-col-6">.g-col-6</div> <div class="g-col-6">.g-col-6</div> <div class="g-col-6">.g-col-6</div> </div>
4、开始(Starts)
<div class="grid"> <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div> <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div> </div>
5、自动列(Auto columns)
<div class="grid"> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </div>
<div class="grid"> <div class="g-col-6">.g-col-6</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </div>
7、嵌套(Nesting)
<div class="grid" style="--bs-columns: 3;"> <div> First auto-column <div class="grid"> <div>Auto-column</div> <div>Auto-column</div> </div> </div> <div> Second auto-column <div class="grid" style="--bs-columns: 12;"> <div class="g-col-6">6 of 12</div> <div class="g-col-4">4 of 12</div> <div class="g-col-2">2 of 12</div> </div> </div> <div>Third auto-column</div> </div>
8、无网格类(No grid classes)
<div class="grid" style="--bs-columns: 3;"> <div>Auto-column</div> <div>Auto-column</div> <div>Auto-column</div> </div>
9、列和间隙(Columns and gaps)
<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;"> <div class="g-col-2">.g-col-2</div> <div class="g-col-2">.g-col-2</div> </div>
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;"> <div class="g-col-6">.g-col-6</div> <div class="g-col-4">.g-col-4</div> </div>
10、添加行(Adding rows)
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;"> <div>Auto-column</div> <div class="g-start-2" style="grid-row: 2">Auto-column</div> <div class="g-start-3" style="grid-row: 3">Auto-column</div> </div>
11、间隙(Gaps)
<div class="grid" style="row-gap: 0;"> <div class="g-col-6">.g-col-6</div> <div class="g-col-6">.g-col-6</div> <div class="g-col-6">.g-col-6</div> <div class="g-col-6">.g-col-6</div> </div>
<div class="grid" style="--bs-gap: .25rem 1rem;"> <div class="g-col-6">.g-col-6</div> <div class="g-col-6">.g-col-6</div> <div class="g-col-6">.g-col-6</div> <div class="g-col-6">.g-col-6</div> </div>