GUÍA 2

MODO DE DISEÑO

Layout.

El layout determina la posición,

tamaño y separación de los
elementos que componen una página
web, basado en la forma como
interactúan los elementos hermanos
y padres para dibujar la página en
pantalla.

El diseño de la página web se basa en

bloques, tales como: cabecera
(header), menu (nav), contenido
principal (main), contenido adicional
(aside) y pie de página (footer). Estos
elementos suelen disponerse sobre
una cuadrícula que está formada por
filas y columnas. Antes de editar el
código para hacer el layout, es
necesario tener un boceto de la forma
como va a quedar la página. Por
ejemplo:

Mg. Martín Hernán Ospina Londoño 

Unidades de Medida.

CSS emplea diversas medidas para definir el tamaño de los elementos en cuanto
a su ancho y su alto, asi como tambien el tamaño de la fuente, márgenes y
bordes, entre otros. Las unidades de medida se dividen en dos grandes grupos:
absolutas y relativas.

1. Unidades Absolutas:

Son medidas completamente definidas y permiten establecer un valor fijo,

es decir que no se modifica en ninguna circunstancia. Esta característica
hace que hoy en día prácticamente no sean utilizadas. Estas medidas son:

a. in​: pulgadas.
b. cm​: centímetros.
c. mm​: milímetros.
d. pt​: puntos.
e. pc​: picas

2. Unidades Relativas:

son unidades de medida flexibles, que no están completamente definidas ya

que su valor depende de otro valor. Son las unidades más apropiadas para
utilizar en el diseño web y entre estas están:

a. %​: unidad porcentual, es la que usa el navegador por defecto.

b. em: unidad relativa al tamaño de fuente (letra) del elemento padre
que lo contiene.
c. rem​: unidad relativa al tamaño de fuente del elemento raíz, es decir
al tamaño de letra definido para el elemento HTML, que por defecto
es de 16 pixeles, osea que por defecto 1 rem es igual a 16 px.
d. vw​: (viewport width) porcentaje relativo al ancho del viewport.
Cuando se habla de viewport se está haciendo referencia al tamaño
de la ventana en la cual se visualiza el documento, así por ejemplo el
viewport de la pantalla de un celular es mucho más pequeño que el
de un computador portátil.

Mg. Martín Hernán Ospina Londoño 

 e. vh​: (viewport height) porcentaje relativo al alto del viewport.
f. px​: pixeles, se consideran una unidad relativa por lo que varía de
acuerdo a la resolución de las diferentes pantallas, pero en el fondo
se comporta como una unidad fija.

Elementos en Línea y de Bloque.

HTML define, por defecto, dos formas de presentar los elementos: elementos en
línea (​inline)​ y elementos de bloque (​block​). Pero con CSS puede manipularse
este comportamiento e incluso crear una nueva forma: los elementos ​inline-block.

❖ Elementos en Línea (inline):

➢ No crean una línea para cada elemento.
➢ Tienen una medida de ancho, pero no de alto.
➢ Se ajustan al contenido.

❖ Elementos de Bloque (in block):

➢ Crean una línea para cada elemento.
➢ Tienen una medida de ancho y de alto.
➢ Ocupan todo el espacio horizontal disponible.

Block

Inline Inline Inline Inline

Inline-Block
Inline Inline

Block

Mg. Martín Hernán Ospina Londoño 

Propiedad Display.

CSS Grid.

En la propiedad display, grid es uno de los posibles valores, pero en realidad

representa todo un módulo CSS, dedicado a la maquetación de páginas web. Grid
genera una estructura de dos dimensiones en filas y columnas llamada cuadrícula
o rejilla, similar a las tablas, a través de la cual se pueden posicionar y
dimensionar los distintos elementos HTML.
Mg. Martín Hernán Ospina Londoño 
Conceptos Generales.

Grid Container: es la etiqueta HTML que hace las veces de contenedor o

elemento padre.

Grid Items: son los elementos HTML hijos directos del Grid Container y son los
que se van a distribuir en la cuadrícula.

Grid Line: son las líneas verticales y horizontales, que dividen la cuadrícula en
celdas.

Grid Cell: es la unidad mínima de la cuadrícula, llamada celda y delimitada por

dos líneas horizontales y dos líneas verticales.

Grid Track:​ banda horizontal o vertical de celdas.

Grid Area: es un segmento de la cuadrícula, delimitado por cuatro Grid Lines, al

cual se le asigna un identificador y que puede estar formado por una o varias Grid
Cells.

Mg. Martín Hernán Ospina Londoño 

Propiedades del contenedor.

Display: grid; Define el elemento como un contenedor de bloque y

mostrará su contenido en una cuadrícula.

inline-grid Establece el elemento como un contenedor en línea y

presentará su contenido en una cuadrícula.

Definir la cuadrícula.

grid-template-columns: Define el número de columnas y establece su

ancho.

grid-template-rows: Determina el número de filas y define su

altura.

grid-template-area: Específica áreas del contenedor “Grid-area”,

asignándoles como valor un nombre.
.container​ {
​display​: ​grid​;
​grid-template-columns​: ​8em​ ​8em​ ​8em​;
​grid-template-rows​: ​repeat​(​4​, ​8em​);
}

Shorthand.

grid-template: define el tamaño y cantidad de filas y columnas, así como

también los grid-area con sus nombres. Esta propiedad es un shorthand (atajo)
que agrupa las propiedades: grid-template-area, grid-template-rows y
grid-template-columns.

.container​ {
​display​: ​grid​;
​grid-template​: ​1fr​ ​1fr​ ​1fr​ ​1fr​ / ​1fr​, ​1fr​, ​1fr​;
}

Mg. Martín Hernán Ospina Londoño 

Los valores de medida de estas propiedades se pueden definir usando
cualquiera de las unidades de medida vistas anteriormente: px, em, %, etc. Sin
embargo css grid tiene una unidad de medida propia el fr (fracción).

La medida fr: ​es una unidad de medida exclusiva de css grid, representa una
fracción del espacio disponible en el contenedor. Por ejemplo, definir:
1fr 1fr, creará columnas y cada una tendrá la mitad del espacio disponible.
3fr 1fr, creará dos columnas, pero la primera será el triple de grande que la
segunda.

Establecer espaciado.

grid-column-gap: Específica, con una medida, la separación entre

columnas.

grid-row-gap: Específica la separación entre filas.

Shorthand

grid-gap: agrupa las dos propiedades anteriores especificando la separación

entre columnas y entre filas.

.container​ {
​grid-gap​: ​10px​;
}

Propiedades de los Ítems.

Determinar la posición y extensión de los elementos.

Mg. Martín Hernán Ospina Londoño 

Posicionar y dimensionar los elementos horizontalmente:

grid-column-start: Define el número de línea en columna donde debe

empezar el elemento. Valor el número de línea.

.item_1​ {
​grid-column-start​: ​2​;
}

grid-column-end: Define el número de línea en columna donde debe

terminar el elemento. Valor el número de línea.

.item_1​ {
​grid-column-end​: ​4​;
}

Shorthand

grid-column: agrupa las dos propiedades anteriores especificando en qué

líneas de columna inicia y termina el elemento.

.item_1​ {
​grid-column​: ​2​/​4​;
}

Posicionar y dimensionar los elementos verticalmente:

grid-row-start: Define el número de línea en fila donde debe

empezar el elemento. Valor el número de línea.

.item_1​ {
​grid-row-start​: ​2​;
}

grid-row-end: Define el número de línea en fila donde debe

Mg. Martín Hernán Ospina Londoño 

 terminar el elemento. Valor el número de línea.

.item_1​ {
​grid-row-end​: ​4​;
}

Shorthand
grid-row: agrupa las dos propiedades anteriores especificando en qué líneas
de fila inicia y termina el elemento.

.item_1​ {
​grid-row​: ​2​/​4​;
}

Shorthand

grid-area: agrupa las propiedades grid-row-start, grid-column-start,

grid-row-end y grid-column-end en una sola propiedad.

.item_1​ {
​grid-area​: ​3​/​2​/​5​/​4​;
}

Autoalineación y orden de los ítems.

justify-self: Se utiliza para alinear horizontalmente el ítem al cual se le

aplica.
Sus posibles valores son: start, end, center y stretch.

align-self: Se utiliza para alinear horizontalmente el ítem al cual se le

aplica. Sus posibles valores son: start, end, center y stretch.

order: Los elementos se visualizan sobre la cuadrícula, según el

orden en el que aparezcan en el código fuente (HTML), pero
con esta propiedad, es posible cambiar ese orden,
asignándole al ítem un número, que va a determinar su
posición en la rejilla. Por defecto el valor de order para todos

Mg. Martín Hernán Ospina Londoño 

 los elementos es igual a 0.

Ahora entre el juego ​GRID GARDEN ​y pruebe sus habilidades en el diseño de

cuadrículas con CSS GRID.

Luego de superar, por lo menos el nivel 20 del juego Grid Garden, retome el
archivo estilos_nombre_apellido.css y usando CSS GRID, haga el layout para la
página index.html, tal como aparece en la primera página de este documento.

1. Analice la geometría del layout.

2. Determine en el container el modelo (template).
3. Determine la posición de cada ítem.

Mg. Martín Hernán Ospina Londoño