8# Definir Filas y columnas: CSS Grid

Ya hemos visto las áreas de grid, pero ¿es la única forma de poder hacer esto? Pues ya sabes la respuesta, ¡No!

Ya depende de tu diseño el cuál forma usar. Pero ahora lo veremos con el diseño de arriba diseño

Primero, a eliminar todo lo que hicimos con grid área.

También con las clases de CSS 🙄

Al igual las clases de html xd

Ya no te voy a enseñar como poner columnas, ya que lo hemos visto en los últimos 6 blogs

Solamente necesitamos 2 filas y 7 columnas. Debe de quedar de esta forma

Ahora, revisando nuestro diseño. Vemos que el primer y el último elemento son enormes
Así que seleccionamos el primer elemento para diseñarlo.... Pero, ¿Qué otro metodo hay para hacerlo?

Te presento a los elementos start-end. Le decimos donde queremos que inicie un elemento y en donde termine.

Como pueden ver, el primer elento inciara en la línea 1 y terminará en la 3. Esto será igual para las filas

Ahora vamos a ver como está quedando

Pero, ¿por qué ocupa dos columnas en lugar de 3? Ya que dijimos que empieza en el 1 y termina en el 3 ¿no?
Es porque no el marco de referencia son los grid-line, lo recuerdas ¿no?

Ahora a con el ultimo elemento !!!
Ya sabes que a CSS le gusta resumir las cosas, así que en lugar de grid-column-start y grid-column-end.
Simplemento podemos poner:

grid-column: inica / termina;

grid-row: inicia / termina;

Los elementos 4 y 5 queremos que estén debajo de los elementos 2 y 3. Así que solamte hay que modificar su grid-row, para que se vayan a abajo. CSS (Que nos ama) los va a acomodar por nosotros

Listo !! Es bonito ¿no?... Ya se parece a nuestro diseño

Comentarios

Entradas más populares de este blog

3# Criptografía - Cifrado por sustitución Atbash

__ Indice __ ¿Qué es Atbash? Proceso de cifrado Proceso de descifrar Código Github ¿Qué es Atbash? Atbash es un método de cifrado para el alfabeto hebreo, por lo tanto entra en la clasificación de - Cifrado Clásico - se le conoce también como el método espejo, pues consiste en sustituir en la que la primera letra (A) será sustituida por la última (Z), la segunda por la penúltima (B - Y) y así sucesivamente. Proceso de cifrado Vayamos a probarlo, vamos a cifrar nuestra palabra de costumbre RegularWeb: R = I E = V G = T U = F L = O Resultado : IVTFOZIDVY A = Z R = I W = D E = V B = Y Proceso de descifrar Para descifrar es el mismo procedimiento. R = I E = V G = T U = F L = O Resultado : REGULARWEB A = Z R = I W = D E = V B = Y Código Github https://github.com/NeoTRAN001/Crypt

2# Criptografía - Polybios

__ Indice __ ¿Qué es Polybios? Proceso de cifrado Proceso de descifrar Código Github __ ¿Qué es Polybios? __ Es un sistema de cifrado en el que se coloca todo el alfabeto en una matriz, y cada letra tiene una posición en la que será convertida. Es considerado el algoritmo de cifrado más antiguo que se tiene registro •Su nombre se le da por el Historiador griego Polybios • Alrededor del año 150 a. C. __ Proceso de cifrado __ Bien, el proceso de cifrado es bastante fácil, tenemos nuestra matriz bidimensional , si queremos traducir el carácter - ? - nos da como resultado [ 0, 0 ] Y pues, eso es todo... Vayamos a cifrar la palabra Hola H = [4, 9] o = [1 , 9] l = [1, 5] a = [0, 4] Resultado: 49191504 __ Proceso de descifrar __ Ahora si queremos el proceso inverso, solamente tenemos, tenemos que mandarle las posiciones y este nos devolverá el carácter [4, 9] = H [1 , 9] = o [1, 5] = l [0

Sockets en C#

__ Índice __ ¿Qué son los sockets en programación? Ejemplo en C# Github __ ¿Qué son los socket en programación? __ Un socket es un método de comunicación entre un programa cliente y un servidor. Entonces podemos decir que los sockets, son el "tunel" de comunicación entre dos aplicaciones. __ Ejemplo en C# __ Servidor Creamos un nuevo proyecto en consola que será el código del servidor Importamos las librerías necesarias para los sockets Declaramos dos variables, una será la dirección del Server , ya que estamos haciendo todo en nuestra pc la dirección debe de ser la local, localhost o 127.0.0.1 La otra variable será el puerto de conexión, es recomendable seleccionar un puerto alto. Es por eso que las aplicaciones utilizan 8080 . Ahora tenemos que crear un objeto de tipo Socket, que nos pide tres parámetro: 1- Esquema del tipo de diccionario: AddressFamily.InterNetwork dice que utilizará una dirección IP

R3gularWeb

Buscar este blog