Развернуть динамические c столбцы сетки до максимальной ширины строки? - PullRequest
Новая
       3

Развернуть динамические c столбцы сетки до максимальной ширины строки?

0 голосов
/ 18 января 2020

Привет всем. Я пытаюсь реализовать заголовок в сетке, который динамически перемещает столбцы в следующую строку на меньших экранах. Я использую следующую строку для его построения:

grid-template-columns: repeat (auto-fit, minmax (max-content, 230px));

It вроде работает, но в некоторых разрешениях столбцы не расширяются до полной ширины вправо, и поэтому из-под них становится виден другой фон (из [body]). Как я могу сделать все столбцы даже в правом конце экрана без mediaquery или cal c (попробую те, если нет другого способа)? Извините за непрофессиональное объяснение, я все еще новичок в кодировании. Снимок экрана 

@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>

1 Ответ

0 голосов
/ 19 января 2020

Решение состоит в том, чтобы поместить эту сетку в родительский блок div с цветом фона заголовка. Он заменит основной фон, и все строки будут иметь ширину 100% при всех разрешениях.

...