css div上下左右排序

浅影歌年

已于 2023-05-12 11:42:59 修改

阅读量2.7k

点赞数 3

文章标签： css 前端 javascript

于 2023-05-05 14:30:55 首次发布

本文链接：https://blog.csdn.net/weixin_44980864/article/details/130506261

版权

该HTML代码示例展示了如何使用CSSGrid进行div元素的排列。通过设置`grid-auto-flow`属性为`column`或`row`，可以实现元素先列后行或先行后列的布局。同时，定义了列宽、行高、行间距和列间距来调整网格布局。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>div上下左右排序</title>
</head>
<style>
  .div-box {
      display: grid;
      grid-auto-flow: column; /* 排序方式： column-先列后行， row-先行后列 */
      grid-template-columns: repeat(4, 207px); /* 设计列宽 */
      grid-template-rows:  repeat(2,138px); /* 设计行高 */
      /* grid-template-rows:  repeat(2,auto); */
      grid-row-gap: 24px; /* 行间距 */
      grid-column-gap: 177px;  /* 列间距 */
  }
  .div-box2 {
      display: grid;
      grid-auto-flow: row;
      grid-template-columns: repeat(4, 207px);
      grid-template-rows:  repeat(2,138px);
      /* grid-template-rows:  repeat(2,auto); */
      grid-row-gap: 24px;
      grid-column-gap: 177px;
  }
  .div-item {
      background-color: #0ec885;
      line-height: 138px;
      text-align: center;
  }
</style>
<body>
<h2>排列：先列后行</h2>
<div class="div-box">
  <div class="div-item">1</div>
  <div class="div-item">2</div>
  <div class="div-item">3</div>
  <div class="div-item">4</div>
  <div class="div-item">5</div>
  <div class="div-item">6</div>
</div>
<h2>排列：先行后列</h2>
<div class="div-box2">
  <div class="div-item">1</div>
  <div class="div-item">2</div>
  <div class="div-item">3</div>
  <div class="div-item">4</div>
  <div class="div-item">5</div>
  <div class="div-item">6</div>
  <div class="div-item">7</div>
  <div class="div-item">8</div>
</div>
</body>
</html>