大家好，谢谢。我正在尝试在网格上实现一个标题，该标题可以在较小的屏幕上动态地将列移动到下一行。我使用以下字符串进行构建：
grid-template-columns：repeat（auto-fit，minmax（max-content，230px））;
这有点用，但在某些分辨率下，列不会扩展到右侧的整个宽度，因此从下面可以看到另一个背景（来自[body]）。如何在不使用mediaquery或calc的情况下使所有列甚至到达屏幕的右端（如果没有其他方法，将尝试使用这些列）？抱歉，由于不专业，我对编码还是陌生的。 Screenshot
@charset "utf-8";
.headergrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(max-content, 230px));
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;}
.headergrid > div {
background-color: #191D1F;}<body style="background-color:#1ba6fc;">
<div class="headergrid">
<div class="location">
<img src="clipart-map-location-11.png" alt="location" width="20" height="20" class="locicon"><span style="color:#E2E4C9">Москва, ул Хабаровская, 2. Cр-Вс с 12 до 18.</span>  
</div>
<div class="element">
<a href="tel:+7(977)8844 922"><img src="phngrn.png" width="25" height="25" alt="phone" class="phonicon">+7(977)8844-922</a>  
</div>
<div class="element">
<a href="mailto:[email protected]"><img src="hiclipart.com (11).png" width="30" height="20" alt="mail" class="mailicon"/>[email protected]</a>    
</div>
<div class="element">
</div>
<div class="social">
<a href="https://api.whatsapp.com/send?phone=79778844922"><img src="hiclipart.com.png" width="40" height="30" alt="whatsapp" class="whappicon"></a>  
<a href="https://vk.com/zvteh"><img src="hiclipart.com (12).png" width="30" height="30" alt="VK.com" class="vkicon"></a>  
<a href="https://telegram.me/zvteh"><img src="hiclipart.com (14).png" width="27" height="27" alt="Telegram" class="telecon"></a></div>
</div>解决方案是将此表格放入标头背景颜色的父div框中。它将覆盖那里的主要背景，所有行在所有分辨率下都显示为100％宽度。