'How can I prevent gap property lines in a grid container from being erased when zooming out?

I have a container div with 16 divs inside. I have applied the gap property with 1 px both horizontally and vertically. I created 4 columns and 4 rows, so that the container was 4 x 4.

This is the code:

HTML

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

CSS

#container {
 display: grid;
 background-color: #696969;
 border: 1px solid #000;
 width: 500px;
 height: 500px;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(4, 1fr);
 gap: 1px;
}

#container div {
 background-color: #fff;
}

100% default zoom. introducir la descripción de la imagen aquí

Zoom 120% introducir la descripción de la imagen aquí

Zoom 80% introducir la descripción de la imagen aquí

You can see that at 120% zoom the vertical gap is larger in the middle line. On the other hand, at 80% zoom several lines of the gap disappear.

How can I avoid this behavior?

javascripthtmlcsscss-grid


Solution 1:[1]

You can solve this zoom issue by not using absolute units for "gap" and by adding "max-width" and "max-height" with relative units to the grid div elements like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid</title>
  <style>
 #container {
 display: grid;
 background-color: #696969;
 border: 1px solid #000;
 width: 500px;
 height: 500px;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(4, 1fr);
 gap: calc(1% / 3);
}

#container div {
 background-color: #fff;
 max-width: 98%;
 max-height: 98%;
}
  </style>
</head>
<body>

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Markus

Related Questions