Search code examples
htmlcsscss-grid

Expand dynamic grid columns upto row max width?

Greet1ngs, everyone. I'm trying to implement a header on grid which dynamically moves columns to the next row on smaller screens. I use the following string to build it:

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

It kinda works but on some resolutions columns do not expand to the full width to the right and thus another background (from [body]) becomes visible from underneath. How can I make all columns even to the right end of the screen without mediaquery or calc (will try those if no other way)? Sorry for unprofessional explanation, I'm still new to coding. 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:[email protected]"><img src="hiclipart.com (11).png" width="30" height="20" alt="mail" class="mailicon"/>[email protected]</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>

Solution

  • The solution is to put this grid into parent div box with header's background color. It will override main background there and all rows appear having 100% width at all resolutions.