Question

大家好。我正在尝试在网格上实现一个标题，该标题可将列动态移动到较小屏幕上的下一行。我使用以下字符串进行构建：

网格模板列：repeat（自动调整，minmax（最大内容，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">
    &nbsp;<img src="clipart-map-location-11.png" alt="location" width="20" height="20" class="locicon"><span style="color:#E2E4C9">Москва, ул Хабаровская, 2. Cр-Вс с 12 до 18.</span>&emsp;&emsp;
  </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>&emsp;&emsp;
  </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>&emsp;&emsp;&emsp;&emsp;
  </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>&emsp;&emsp;
	<a href="https://vk.com/zvteh"><img src="hiclipart.com (12).png" width="30" height="30" alt="VK.com" class="vkicon"></a>&emsp;&emsp;
	<a href="https://telegram.me/zvteh"><img src="hiclipart.com (14).png" width="27" height="27" alt="Telegram" class="telecon"></a></div>
	</div>

Answer 1

解决方案是将此表格放入带有标题背景颜色的父div框中。它将覆盖那里的主要背景，所有行在所有分辨率下都显示为100％宽度。

将动态网格列扩展到行最大宽度？

1 个答案: