css利用grid实现换行后最后一行左排起

最新推荐文章于 2024-03-05 11:37:40 发布

白开水z

最新推荐文章于 2024-03-05 11:37:40 发布

阅读量848

点赞数

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/li222248/article/details/122001277

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

官网地址：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
效果图：
在这里插入图片描述

   <div class="ul">
      <div class="li"></div>
      <div class="li"></div>
      <div class="li"></div>
      <div class="li"></div>
      <div class="li"></div>
    </div>

.ul {
  display: grid;
  width: 320px;
  grid-gap: 10px;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 100px 100px;
  .li {
    width: 100px;
    height: 100px;
    outline: #000 solid 1px;
    background: yellow;
  }
}

多学一招：outline属性
使用outline和border的区别：

border：1px solid  #000;

![在这里插入图片描述](https://img-blog.csdnimg.cn/d8d44aa7949a408cabeef02276f4d331.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55m95byA5rC0eg==,size_11,color_FFFFFF,t_70,g_se,x_16