apple官网头部

CSS Grid布局实践

最新推荐文章于 2023-07-26 08:54:17 发布

原创最新推荐文章于 2023-07-26 08:54:17 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sass

css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用CSS Grid布局的HTML示例，展示了如何通过简单的代码实现元素的网格排列。通过定义.grid容器和.grid-item子元素的样式，可以轻松创建响应式和美观的网页布局。

Toubu.html

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

Toubu.scss

练习

.box{

  text-align: justify;

  height: 40px;

}

.box .item{

  //float: left;

  display: inline-block;

  //background: #10baca;

  font-size: 30px;

}

.box::after{

  content: '';

  display: inline-block;

  width: 100%;

  height: 0;

  font-size: 0;

  line-height: 0;

}