[CSS] 多方案实现跨行或跨列布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多方案实现多方案实现跨行或跨列布局</title>
  </head>
  <style>
    .g-container {
      margin: 20px auto;
      width: 400px;
    }
    h2 {
      font-size: 28px;
      text-align: center;

      margin: 30px auto;
    }
    .g-item {
      width: 190px;
      height: 190px;
      box-sizing: border-box;
      border: 1px solid #666;
      border-radius: 10px;
      line-height: 190px;
      font-size: 32px;
      text-align: center;
      cursor: pointer;
      margin: 5px;
      transition: 1s all;
    }

    .g-float {
      overflow: hidden;
    }
    .g-float .g-item {
      float: left;
    }

    .g-float .g-item:first-child {
      /* :first-child, 选取属于其父元素的首个子元素 */
      height: 390px;
    }

    .g-float .g-item:first-child:hover {
      height: 190px;
      width: 390px;
    }

    .g-flex {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 400px;
      height: 400px;
    }
    .g-flex .g-item:first-child {
      height: 390px;
    }

    .g-flex:hover {
      /* hover 一定添加在父级元素上， 无法通过子元素的hover去修改父元素的样式 */
      flex-direction: row;
    }
    .g-flex:hover .g-item:first-child {
      height: 190px;
      width: 390px;
    }
    /* repeat(): https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeat */
    .g-grid {
      display: grid;
      grid-template-rows: repeat(2, 50%); /* 50% 重复两次 */
      grid-template-columns: repeat(2, 50%);
      width: 400px;
      height: 400px;
      transition: 5s all;
    }
    /* unset 从其父级继承，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。*/
    .g-grid .g-item {
      width: unset;
      height: unset;
    }
    /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-row */
    .g-grid .g-item:first-child {
      grid-row: 1 / 3; /* 行起始1线 / 行结束3线 */
      grid-column: 1 / 2; /* 列起始1线 / 列结束2线 */
    }

    .g-grid:hover .g-item:first-child {
      grid-row: 1 / 2;
      grid-column: 1 / 3;
    }
    /* gird布局的动画只能在部分属性上生效，具体见下文 */
    /* https://stackoverflow.com/questions/43911880/using-css-transitions-in-css-grid-layout */
  </style>
  <body>
    <div class="g-container">
      <h2>float 实现</h2>
      <div class="g-float">
        <div class="g-item">0</div>
        <div class="g-item">1</div>
        <div class="g-item">2</div>
        <div class="g-item">3</div>
        <div class="g-item">4</div>
      </div>
      <h2>flex 实现</h2>
      <div class="g-flex">
        <div class="g-item">0</div>
        <div class="g-item">1</div>
        <div class="g-item">2</div>
        <!-- <div class="g-item">3</div>
      <div class="g-item">4</div> -->
      </div>
      <h2>grid 实现</h2>
      <div class="g-grid">
        <div class="g-item">0</div>
        <div class="g-item">1</div>
        <div class="g-item">2</div>
        <div class="g-item">3</div>
        <div class="g-item">4</div>
      </div>
    </div>
  </body>
</html>
多方案实现跨行或跨列布局
david2tdw / blog

[CSS] 多方案实现跨行或跨列布局 #128
