大家好。我试图在网格上实现一个标题，它在较小的屏幕上动态地将列移动到下一行。我使用以下字符串构建它：
Grid-Template-Columns：repeat（auto-fit,minmax（max-content,230px))；
它有点起作用，但在某些分辨率下，列不会向右扩展到全宽，因此另一个背景（从[body])从下面可见。如果没有mediaquery或calc（如果没有其他方法，我会尝试那些），我如何使所有列都保持在屏幕的右端呢？很抱歉不专业的解释，我对编码还是个新手。截图
null
@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:mail@zvteh.ru"><img src="hiclipart.com (11).png" width="30" height="20" alt="mail" class="mailicon"/>mail@zvteh.ru</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>null
解决方案是将此网格放入带有标题背景色的父div框中。它将在那里覆盖主背景，并且所有行在所有分辨率下都显示为100%的宽度。
