CSS Flex布局 Grid 简单方阵布局_css grid 自动排列留出间隔-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40144303/article/details/122317371

这篇博客介绍了如何利用CSS Flex和Grid布局技术来创建简单的方阵排列。作者更倾向于使用Grid，尽管其浏览器兼容性相对稍弱，但功能更强大，基本布局无需频繁操作子元素。欢迎读者分享其他有效的布局方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录利用 flex 和 grid 实现方阵排列的简单布局

 <div>flex布局间距</div>
  <div class="flex-box-all">
    <div class="flex-box-item"><span>1</span></div>
    <div class="flex-box-item"><span>2</span></div>
    <div class="flex-box-item"><span>3</span></div>
    <div class="flex-box-item"><span>4</span></div>
    <div class="flex-box-item"><span>5</span></div>
  </div>
  <div>grid布局间距</div>
  <div class="grid-box-all">
    <div class="grid-box-item"><span>1</span></div>
    <div class="grid-box-item special"><span>2</span></div>
    <div class="grid-box-item"><span>3</span></div>
    <div class="grid-box-item"><span>4</span></div>
    <div class="grid-box-item"><span>5</span></div>
  </div>

<style>
  .flex-box-item {
    background-color: aquamarine;
    width: 150px;
    height: 150px;
  }

  .flex-box-all {
    display: flex;
  }

  .flex-box-item {
    margin-right: 20px
  }

  .flex-box-item span {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;


  }

  .grid-box-item {
    background-color: cadetblue;
    width: 150px;
    height: 150px;
  }

  .grid-box-all {
    /* grid-template-columns: fit-content(20%); */
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    gap: 20px;
  }

  .special {
    /* 第二行 占用2格 */
    /* grid-column-start: 2; */
    /* grid-column-end: 4; */
  }

  .grid-box-item {
    display: grid;
    justify-items: center;
    align-items: center;
  }

  /* .grid-box-item span {
    place-content: center;
  } */
</style>

个人更喜欢grid ，功能要多点，基本的布局也不太需要操作子元素，不过grid 兼容要差一点，如果有更好的布局可以相互分享哈