0
182
Views¿Cómo puedo evitar que las líneas de propiedad de espacio en un contenedor de cuadrícula se borren al alejar?
Tengo un contenedor div con 16 divs dentro. He aplicado la propiedad gap con 1 px tanto en horizontal como en vertical. Creé 4 columnas y 4 filas, de modo que el contenedor fuera de 4 x 4.
Este es el código:
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; } Zoom 100% predeterminado. 
Zoom 120% 
Zoom 80% 
Puede ver que con un zoom del 120 %, el espacio vertical es mayor en la línea central. Por otro lado, con un zoom del 80% desaparecen varias líneas del hueco.
¿Cómo puedo evitar este comportamiento?
·
Juan Pablo Isaza
1 answers
Answer question0
Puede resolver este problema de zoom al no usar unidades absolutas para "brecha" y al agregar "ancho máximo" y "altura máxima" con unidades relativas a los elementos div de la cuadrícula como este:
<!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>
·
Juan Pablo Isaza
Report
Answer question