max-width似乎被视为width;如何围绕内容进行包装?

Question

我有以下html和css:

.group {
display: inline-grid;
grid-template-columns: auto 1fr;
grid-gap: 5px;
outline: 1px solid red;
}
.title {
grid-column: 1/-1;
}
.booking-container {
display: grid;
grid-template-columns: repeat(auto-fill, 20px);
grid-gap: 10px;
max-width: 150px;  
}
.booking {
background: green;
width: 20px;
height: 20px;
}

<div class="group">
<h3 class="title">Title 1</h3>
<div class="name">Name</div>
<div class="booking-container">
<div class="booking">1</div>
<div class="booking">2</div>
</div>
</div>
<div class="group">
<h3 class="title">Title 2</h3>
<div class="name">Name</div>
<div class="booking-container">
<div class="booking">1</div>
<div class="booking">2</div>
<div class="booking">3</div>
<div class="booking">4</div>
<div class="booking">5</div>
<div class="booking">6</div>
<div class="booking">7</div>
<div class="booking">8</div>
</div>
</div>

似乎将max-width视为width;第一块(标题1)比必要的要宽。我该怎么做才能让它很好地环绕内容?是否可能只使用css?

编辑:最终结果应该是这样的，但独立于绿色块(预订)的数量。希望我的问题是清楚的。

.group {
display: inline-grid;
grid-template-columns: auto 1fr;
grid-gap: 5px;
outline: 1px solid red;
}
.title {
grid-column: 1/-1;
}
.booking-container {
display: grid;
grid-template-columns: repeat(auto-fill, 20px);
grid-gap: 10px;
max-width: 150px;  
}
.booking {
background: green;
width: 20px;
height: 20px;
}


.group1 .booking-container {
max-width: 70px;
}

<div class="group group1">
<h3 class="title">Title 1</h3>
<div class="name">Name</div>
<div class="booking-container">
<div class="booking">1</div>
<div class="booking">2</div>
</div>
</div>
<div class="group">
<h3 class="title">Title 2</h3>
<div class="name">Name</div>
<div class="booking-container">
<div class="booking">1</div>
<div class="booking">2</div>
<div class="booking">3</div>
<div class="booking">4</div>
<div class="booking">5</div>
<div class="booking">6</div>
<div class="booking">7</div>
<div class="booking">8</div>
</div>
</div>

Answer 1

一种方法是不把预订放在网格中，而是放在一个最大宽度的div中，并显示为内联块。

.group {
display: inline-grid;
grid-template-columns: auto 1fr;
grid-gap: 5px;
outline: 1px solid red;
}
.title {
grid-column: 1/-1;
}
.booking-container {
max-width: 150px;  
}
.booking {
background: green;
width: 20px;
height: 20px;
display:inline-block;
margin: 2.5px;
text-align: center;
}

<div class="group">
<h3 class="title">Title 1</h3>
<div class="name">Name</div>
<div class="booking-container">
<div class="booking">1</div>
<div class="booking">2</div>
</div>
</div>
<div class="group">
<h3 class="title">Title 2</h3>
<div class="name">Name</div>
<div class="booking-container">
<div class="booking">1</div>
<div class="booking">2</div>
<div class="booking">3</div>
<div class="booking">4</div>
<div class="booking">5</div>
<div class="booking">6</div>
<div class="booking">7</div>
<div class="booking">8</div>
</div>
</div>

Answer 2

你真的想使用grid吗?因为你可以用基本的inline-block(不改变HTML中的任何内容)得到你想要的结果:

.group {
display: inline-block;
vertical-align:top;
outline: 1px solid red;
}
.name{
display:inline-block;
vertical-align:top ;
}
.booking-container {
max-width: 150px;  
display:inline-block;
vertical-align:top ;
}
.booking {
display:inline-block;
vertical-align:middle;
background: green;
width: 20px;
height: 20px;
margin:3px;
}