Solution 1 :

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.

Problem :

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 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 class="element">
    <a href="mailto:[email protected]"><img src=" (11).png" width="30" height="20" alt="mail" class="mailicon"/>[email protected]</a>&emsp;&emsp;&emsp;&emsp;
  <div class="element">
  <div class="social">
	<a href=""><img src="" width="40" height="30" alt="whatsapp" class="whappicon"></a>&emsp;&emsp;
	<a href=""><img src=" (12).png" width="30" height="30" alt="" class="vkicon"></a>&emsp;&emsp;
	<a href=""><img src=" (14).png" width="27" height="27" alt="Telegram" class="telecon"></a></div>


Comment posted by Mickael B.

What have you done so far ? Can you show us your code ?

Comment posted by How to Ask

You should include your code directly in your question, see

Comment posted by Nickolay K

Will do, yes…