grid布局小案例

<style>
  .parent {
    display: grid;
    grid-template-columns: 25% 75%;
    /* grid-template-columns: 1fr 3fr;  */     /* 同上 */
    height: 100px;
  }
  .child {
    border: 1px solid red;
  }
</style>

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

<style>
  .parent {
    display: grid;
    grid-template-columns: 1fr 3fr;
    height: 100px;
    gap: 10px;
  }
  .child {
    border: 1px solid red;
  }
</style>

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

<style>
  .parent {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 20px 1fr;
    border: 1px solid silver;
    gap: 10px;
    height: 100px;
  }
  .child {
    border: 1px solid red;
  }
</style>

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

<style>
  .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    width: 14.5rem;
  }
  .day {
    border: 1px solid silver;
    height: 2rem;
    width: 2rem;
    line-height: 2rem;
    text-align: center;
  }
</style>

<div class="calendar">
  <div class="day">1</div>
  <div class="day">2</div>
  <div class="day">3</div>
  <div class="day">4</div>
  <div class="day">5</div>
  <div class="day">6</div>
  <div class="day">7</div>
  <div class="day">8</div>
  <div class="day">9</div>
  <div class="day">10</div>
  <div class="day">11</div>
  <div class="day">12</div>
  <div class="day">13</div>
  <div class="day">14</div>
  <div class="day">15</div>
  <div class="day">16</div>
  <div class="day">17</div>
  <div class="day">18</div>
  <div class="day">19</div>
  <div class="day">20</div>
  <div class="day">21</div>
  <div class="day">22</div>
  <div class="day">23</div>
  <div class="day">24</div>
  <div class="day">25</div>
  <div class="day">26</div>
  <div class="day">27</div>
  <div class="day">28</div>
  <div class="day">29</div>
  <div class="day">30</div>
  <div class="day">31</div>
</div>