Crear un tablero de juego El juego que he decidido crear es uno de mis favoritos. It's Jeopardy, existe desde 1964 y sigue siendo fuerte. Lo que está viendo aquí es un desarrollador en línea. Se llama CodePen IO. Y lo que puedes hacer aquí es probar parte del código con el que vas a trabajar. Lo que hice fue crear un pequeño documento HTML que quiere imprimir cuatro columnas. Y para este diseño y para este curso, vamos a profundizar en las habilidades de la clase grid. Y lo que vamos a poder hacer es armar un tablero de juego que tenga un diseño receptivo, y también atractivo para los ojos. Como puede ver, en el lado izquierdo de la pantalla en mi documento HTML, tengo un HTML simple con una división llamada clase, Tengo una sección del programa que se divide en cuatro columnas, y tengo dos clases allí, una se llama la clase de cuadrícula, y el otro se llama clase columna y veremos cómo se aplica el estilo en CSS. Si miras en el medio, esa es la ventana de código CSS, tenemos algunas cosas básicas para nuestro cuerpo y luego definimos qué es la clase de cuadrícula. Si miras con atención en el círculo rojo, verás que estoy creando algo llamado una columna de plantilla de cuadrícula y quiero cuatro columnas, cada una para ocupar el 25% de la pantalla. El problema es cuando quiero separar esas columnas. con algo llamado brecha de cuadrícula. Y como puede ver, en la línea 12, Estoy estableciendo el espacio de la cuadrícula en 10 píxeles. Y eso me da un espacio entre cada una de las columnas. ¿Qué sucede con las columnas de la plantilla de cuadrícula y el 25% es que no incluye el espacio entre columnas y, en consecuencia, crea una barra de desplazamiento horizontal, algo que nunca queremos ver. Si miras del lado derecho en la ventana que normalmente está reservado para JavaScript en esta pantalla en particular, no tenemos ninguna, usar el 25% nos da una barra de desplazamiento horizontal en la parte inferior de la columna cuatro. En lugar de cuatro y 25%, Cambio la forma en que se configuran las columnas de la plantilla de cuadrícula. Cambié el 25% para decir que me gustaría usar una fracción del espacio restante. Y lo que vamos a hacer es aprender exactamente cómo funciona esto. La idea es que calcule cuánto espacio restante queda y ajuste el ancho de la columna en lugar del 25%, lo reducirá al 22 o al 23% para acomodar el ancho de los espacios. Y esta fracción, como puede ver, 1fr me permitirá obtener el ancho completo de cuatro columnas e incluya los espacios en el ancho de la página. Veamos cómo se ve eso cuando lo diseñamos en un tablero de juego. En este caso, nuestras categorías se centrarán en CSS, y las cosas en las que vamos a trabajar. Tenemos valores en dólares similar a la forma en que Jeopardy los tiene. Y codificaremos este juego para que funcione. como hace Jeopardy con un pequeño giro. Para que el tablero de juego funcione, vamos a querer crear y usar la propiedad de tamaño de caja. Lo que queremos hacer es crear una altura y un ancho. que vamos a asignar a esta casilla y manejar lo que esté dentro de la caja. Los bordes y el relleno se agregan al ancho para darnos el tamaño de los cuadros representados en la pantalla y tenemos que ajustar ese valor. Nuevamente, como dije, si tenemos cuatro cajas al 25% cada una, cualquier relleno derecho o izquierdo, no cabe en una línea dentro de la restricción de ese contenedor de caja. Entonces, lo que hacemos es cambiarlo en lugar de usar el cuadro de contenido, que es la versión predeterminada, queremos cambiarlo a border-box. Y eso permite que el navegador cuente desde los bordes y el relleno y el ancho del espacio y cualquier otra cosa, y reducirá automáticamente el tamaño del documento para que no haya desplazamiento horizontal. El uso de border-box lo hace más fácil con cualquier elemento que elimina los problemas con la distribución de todo nuestro contenido. Posicionamiento relativo y absoluto permite que esos valores sean relativos al contenido e independiente de los cambios en el borde y el relleno. Entonces siempre obtendremos columnas iguales no importa lo que hacemos. Veamos el código que genera este cuadro de contenido y cuadro de borde. El primero, esta caja más grande, tiene nuestra propiedad box-sizing para establecer en content-box. La caja tendrá 160 píxeles de ancho, 80 píxeles de alto, tendrá un relleno de 20 píxeles, que va a mover el cuadro de contenido de palabras 20 píxeles de distancia del borde, y tendrá un borde de ocho píxeles. Si haces algunos cálculos matemáticos, los 160 píxeles del cuadro, más los dos juegos de relleno, izquierdo y derecho más los dos conjuntos de bordes, izquierdo y derecho realmente le dará una caja de 216 píxeles de ancho. Y lo mismo ocurre con la altura. En lugar de decir cuadro de contenido, creamos una clase llamada border-box. Ese relleno se resta de todo el ancho de la caja y obtenemos una caja mucho más pequeña. ¿Por qué tanto problema? Bueno, cuando los usuarios usan diferentes tipos de dispositivos para acceder a las páginas, necesitamos ahorrar tanto espacio en la pantalla como sea posible y usar border-box nos ayudará a hacer eso.
