<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>
标签:布局,1fr,height,案例,1px,grid,template,border From: https://www.cnblogs.com/caroline2016/p/18043091