CSS 网格，列的水平间距：min-content 似乎没有达到我的预期

Question

我一直在阅读和阅读，但我仍然无法理解 min-content 在这个例子中是如何以及为什么让我失望的。

我有以下 HTML（从一个项目中截取并简化为一个很好的例子）：

<div class="lo_buttons">
        <div class="lo_reload_icon">
            <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-application-icons/24/Apply.png" style="vertical-align: middle;">
        </div>

        <div class="lo_reload">
            <button type="button" class="button_left" id="btnReload">
                <img src="https://cdn2.iconfinder.com/data/icons/c9d/go.png" class="img_button">
            </button>
        </div>

        <div class="lo_shortcuts">
          <button type="button" class="button_left" id="btn1">1</button>
      <button type="button" class="button_left" id="btn2">2</button>
      <button type="button" class="button_left" id="btn3">3</button>
      <button type="button" class="button_left" id="btn4">4</button>
    </div>

        <div class="lo_space">
        </div>

        <div class="lo_utils">
          <button type="button" class="button_right" id="btn1">1</button>
      <button type="button" class="button_right" id="btn2">2</button>
      <button type="button" class="button_right" id="btn3">3</button>
        </div>  
</div>

以及以下 CSS：

.lo_buttons {
    grid-area: lo_buttons; 
    display: grid;
    grid-template-columns: min-content;
    grid-auto-rows: min-content min-content min-content 1fr min-content;
    grid-column-gap: 5px;
    grid-template-areas: "lo_reload lo_reload_icon lo_shortcuts lo_space lo_utils";
    white-space: nowrap !important;
}

.lo_reload      { grid-area: lo_reload; }
.lo_reload_icon { grid-area: lo_reload_icon;  }
.lo_shortcuts   { grid-area: lo_shortcuts; }
.lo_utils       { grid-area: lo_utils;  }
.lo_space       { grid-area: lo_space; }

.button_left { 
    float: left; 
    margin-right: 0.5em;
    margin-bottom: 5px;
}

.button_right { 
    float: right; 
    margin-left: 0.5em;
    margin-bottom: 5px;
}

这一切都在 codepen 上：

https://codepen.io/bernd-wechner/pen/NWPwOXP

（我可以在哪里玩）

我遇到的难题是，我希望将一组编号为 1 2 3 4 的按钮紧贴在其左侧的勾号图标上。图标所在的 div 是最小内容，但比其中的图标消耗的空间要多得多。我在这里想念什么？为什么 min-content 不让网格单元与其中的图标一样宽？

Answer 1

您正在使用grid-auto-rows，它应该是grid-template-columns，它应该是max-content而不是min-content，因为考虑到换行符，min-content 将获得最小宽度，我想您希望按钮保持打开状态同一行。

.lo_buttons {
	grid-area: lo_buttons; 
	display: grid;
	grid-auto-columns: min-content; /* maybe auto-columns here ?*/
	grid-template-columns: max-content max-content max-content 1fr max-content;
	grid-column-gap: 5px;
	grid-template-areas: "lo_reload lo_reload_icon lo_shortcuts lo_space lo_utils";
	/*white-space: nowrap !important; useless*/
}

.lo_reload      { grid-area: lo_reload; }
.lo_reload_icon { grid-area: lo_reload_icon;  }
.lo_shortcuts   { grid-area: lo_shortcuts; }
.lo_utils       { grid-area: lo_utils;  }
.lo_space       { grid-area: lo_space; }

.button_left { 
	float: left; 
	margin-right: 0.5em;
	margin-bottom: 5px;
}

.button_right { 
	float: right; 
	margin-left: 0.5em;
	margin-bottom: 5px;
}

<div class="lo_buttons">
		<div class="lo_reload_icon">
			<img src="https://cdn4.iconfinder.com/data/icons/24x24-free-application-icons/24/Apply.png" style="vertical-align: middle;">
		</div>
		
		<div class="lo_reload">
			<button type="button" class="button_left" id="btnReload">
				<img src="https://cdn2.iconfinder.com/data/icons/c9d/go.png" class="img_button">
			</button>
		</div>
			
		<div class="lo_shortcuts">
		  <button type="button" class="button_left" id="btn1">1</button>
      <button type="button" class="button_left" id="btn2">2</button>
      <button type="button" class="button_left" id="btn3">3</button>
      <button type="button" class="button_left" id="btn4">4</button>
    </div>
			
		<div class="lo_space">
		</div>

		<div class="lo_utils">
		  <button type="button" class="button_right" id="btn1">1</button>
      <button type="button" class="button_right" id="btn2">2</button>
      <button type="button" class="button_right" id="btn3">3</button>
		</div>	
	</div>

我看到您也尝试使用 white-space:nowrap，但它只有在您删除 float 时才有效，在这种情况下您可以保留 min-content，因为它会给您带来与 max-content 相同的结果，因为我们禁用了换行符

.lo_buttons {
	grid-area: lo_buttons; 
	display: grid;
	grid-auto-columns: min-content; /* maybe auto-columns here ?*/
	grid-template-columns: min-content min-content min-content 1fr min-content;
	grid-column-gap: 5px;
	grid-template-areas: "lo_reload lo_reload_icon lo_shortcuts lo_space lo_utils";
	white-space: nowrap ;
}

.lo_reload      { grid-area: lo_reload; }
.lo_reload_icon { grid-area: lo_reload_icon;  }
.lo_shortcuts   { grid-area: lo_shortcuts; }
.lo_utils       { grid-area: lo_utils;  }
.lo_space       { grid-area: lo_space; }

.button_left { 
	margin-bottom: 5px;
}

.button_right { 
	margin-bottom: 5px;
}

<div class="lo_buttons">
		<div class="lo_reload_icon">
			<img src="https://cdn4.iconfinder.com/data/icons/24x24-free-application-icons/24/Apply.png" style="vertical-align: middle;">
		</div>
		
		<div class="lo_reload">
			<button type="button" class="button_left" id="btnReload">
				<img src="https://cdn2.iconfinder.com/data/icons/c9d/go.png" class="img_button">
			</button>
		</div>
			
		<div class="lo_shortcuts">
		  <button type="button" class="button_left" id="btn1">1</button>
      <button type="button" class="button_left" id="btn2">2</button>
      <button type="button" class="button_left" id="btn3">3</button>
      <button type="button" class="button_left" id="btn4">4</button>
    </div>
			
		<div class="lo_space">
		</div>

		<div class="lo_utils">
		  <button type="button" class="button_right" id="btn1">1</button>
      <button type="button" class="button_right" id="btn2">2</button>
      <button type="button" class="button_right" id="btn3">3</button>
		</div>	
	</div>