construcciÓn de pÁginas web -...

CONSTRUCCIÓN DE PÁGINAS WEB

©SantiagoMartíndeJesús

v  Crearelarchivo"comentarios.html”ycomprobarque,aunqueloscomentariosescritosestánpresentesenelcódigofuente,nosemuestranenpantalla:

EJERCICIO

SOLUCIÓN AL EJERCICIO

@media(min-width:500px){h1{margin:1%;}.estiloresponsive{float:right;padding-left:15px;}}

CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS

Flexbox y Grid

CSS

3

Flexbox

El Módulo de Caja Flexible, comúnmente llamado Flexbox, fue creadocomo un modelo unidimensional de diseño, y como un método quepudiese ayudar a distribuir el espacio entre los ítems de una interfaz ymejorar las capacidades de alineación, principalmente para suplantar almodelodecajasflotantes(float).Decimos que Flexbox esta diseñado como modelo unidimensional, ydestacamoselhechoquemanejaeldiseñoenunasoladimensiónalavez— ya sea como fila o como columna. Esto contrasta con el modelobidimensionaldeGridLayoutdeCSS,elcualcontrolacolumnasyfilasalavez.

CSS

4

Flexbox

ConceptosParaempezarautilizarflexboxloprimeroquedebemoshaceresconoceralgunos de los elementos básicos de este nuevo esquema, que son lossiguientes:Contenedor: Existe un elemento padre que es el contenedor que tendrá en suinteriorcadaunodelosítemsflexiblesyadaptables.Ítem:Cadaunodeloshijosflexiblesquecontendráelcontenedorensuinterior.Eje principal: Los contenedores flexibles tendrán una orientación principalespecífica.Pordefecto,esenhorizontal(fila).Eje secundario: De la misma forma, los contenedores flexibles tendrán unaorientaciónsecundaria,perpendicularalaprincipal.Silaprincipalesenhorizontal,lasecundariaseráenvertical,yviceversa.

CSS

5

Flexbox

LosdosejesdeflexboxCuando trabajamos con flexboxnecesitamospensar en términosdedosejes—elejeprincipalyelejecruzado.El eje principal está definido por la propiedad flex-direction, y el ejecruzadoesperpendicularaeste.Todoloquehacemosconflexboxestáreferidoaestosdosejes,porloquevalelapenaentendercómotrabajandesdeelprincipio.

align-contentalign-itemsalign-selfflex

flex-basisflex-directionflex-flowflex-grow

flex-shrinkflex-wrapjustify-contentorderplace-content

Propiedades de Flexbox

CSS

6

ElejeprincipaloMainAxis

Elejeprincipalestádefinidoporflex-direction,queposeecuatroposiblesvalores:

–  row–  row-reverse–  column–  column-reverse

Sielegimosroworow-reverse,elejeprincipalcorreráalolargodelafilasegúnladireccióndelalínea.

CSS

7

ElejeprincipaloMainAxis

Al elegir column o column-reverse el eje principal irá desde el bordesuperior del bloque hasta el final o desde abajo hacia arribarespectivamente.

CSS

8

ElejecruzadooCrossAxis

El eje cruzado va perpendicular al eje principal, y por lo tanto si flex-direction(delejeprincipal)esroworow-reverseelejecruzadoiráporlascolumnas.

CSS

9

ElejecruzadooCrossAxis

Si el eje principal es column o column-reverse entonces el eje cruzadocorrealolargodelasfilas.

Identificar cuál es cada uno de de los ejes, es importante cuandoempezamos a mirar la alineación y justificación flexible de los ítems;flexboxposeepropiedadesquepermitenalineary justificarelcontenidosobreunejeoelotro.

CSS

10

Elcontenedorflex

Unáreadeldocumentoquecontieneunflexboxesllamadacontendedorflex. Para crear un contenedor flex, establecemos la propiedad del áreadelcontenedordisplaycomoflexoinline-flex.Tanprontocomohacemosesto, loshijosdirectosdeestecontenedorsevuelven ítems flex. Como con todas las propiedades de CSS, se definenalgunos valores iniciales, así que cuando creemos un contenedor flextodoslosítemsflexcontenidossecomportarándelasiguientemanera.

§  Los ítemssedespliegansobreunafila(lapropiedadflex-directionpordefectoesrow).

§  Losítemsempiezandesdeelmargeninicialsobreelejeprincipal.§  Losítemsnoseajustanenladimensiónprincipal,perosepueden

contraer.§  Losítemsseajustaránparallenareltamañodelejecruzado.§  Lapropiedadflex-basisesdefinidacomoauto.§  Lapropiedadflex-wrapesdefinidacomonowrap.

CSS

11

Elcontenedorflex

Elresultadoesquetodoslosítemssealinearánenunasolafila,usandoeltamañodel contenedor como su tamañoen el eje principal. Si haymásítemsdelosquecabenenelcontenedor,estosnopasaránmásabajosinoquesobrepasaránelmargen.Sihayítemsmásaltosqueotros,todoslosítemsseránajustadosenelejecruzado,paraigualaralitemmayor.

<divclass="box"><div>Uno</div><div>Dos</div><div>Tres<br>contiene<br>texto<br>extra</div></div>

.box{display:flex;}

CSS

12

Elcontenedorflex

flex-directionMediante lapropiedad flex-directionpodemosmodificar ladireccióndeleje principal del contenedor para que se oriente en horizontal (pordefecto)oenvertical.Además,tambiénpodemosincluirelsufijo-reverseparaindicarquecoloquelosítemsenordeninverso.

<divclass="box"><div>Uno</div><div>Dos</div><div>Tres</div></div>

.box{display:flex;flex-direction:row-reverse;}

v  Pruebalosotrosvalores—row,columnycolumn-reverse—paraverquésucedeconelcontenido.

EJERCICIO

Valor Descripciónrow Estableceladireccióndelejeprincipalenhorizontal.row-reverse Estableceladireccióndelejeprincipalenhorizontal(invertido).column Estableceladireccióndelejeprincipalenvertical.column-reverse Estableceladireccióndelejeprincipalenvertical(invertido).

CSS

13

ContenedoresflexMulti-líneaconflex-wrap

flex-wrapAunque flexbox es unmodelo unidimensional, es posible lograr que losítems flex sean repartidos en varías líneas. Haciendo esto, se deberáconsiderar cada línea como un nuevo contenedor flex. Cualquierdistribucióndelespaciosolosucederádentrodeesalínea,sinreferenciarlaslíneascolaterales.Para lograr repartirse en varias líneas hay que añadir la propiedad flex-wrap con el valor wrap. Cuando los ítems sean demasiados paradesplegarlosenunalínea,seránrepartidosenlalíneasiguiente.

Valor Descripciónnowrap Establecelosítemsenunasolalínea(nopermitequesedesbordeel

contenedor).wrap Establecelosítemsenmodomultilínea(permitequesedesbordeel

contenedor).wrap-reverse Establecelosítemsenmodomultilínea,peroendireccióninversa.

CSS

14

ContenedoresflexMulti-líneaconflex-wrap

<divclass="box"><div>Uno</div><div>Dos</div><div>Tres</div></div>

.box{display:flex;flex-wrap:wrap;}

El ejemplo siguiente contiene ítems que se les ha asignando un ancho,dondeelanchototalde los ítemsexcedealdelcontenedorflex.Cuandoflex-wrapsecolocacomowrap,losítemsserepartirán.Alcolocarlocomonowrap,elcualeselvalorinicial,estossecontraeránparaajustarconelcontenedoryaqueusanlosvaloresinicialesdeflexboxquepermitenquelos ítems se contraigan. Al usar nowrap los ítems podrían salirse delmargensiestosnopudierancontraerse,onocontraerselosuficienteparaentrar.

CSS

15

Laabreviaturaflex-flow

<divclass="box"><div>Uno</div><div>Dos</div><div>Tres</div></div>

.box{display:flex;flex-flow:rowwrap;}

Se pueden combinar las propiedades flex-direction y flex-wrap en laabreviatura flex-flow . El primer valor especificado es flex-direction y elsegundovaloresflex-wrap.

v  Enelejemplo,intentacambiarelprimervalorporunodelosvalorespermitidosparaflex-direction:row,row-reverse,columnocolumn-reverse,ycambiatambiénelsegundovalorporwrapynowrap.

EJERCICIO

CSS

16

Propiedadesdealineacióndeítems

Ahora que tenemos un control básico del contenedor de estos ítemsflexibles, necesitamos conocer las propiedades existentes dentro deflexboxparadisponerlosítemsdependiendodenuestroobjetivo.Vamosaecharunvistazoacuatropropiedadesinteresantesparaello:

Propiedad Valor Actúasobrejustify-content: flex-start|flex-end|center|space-between|space-around Ejeprincipalalign-content: flex-start|flex-end|center|space-between|space-around|

stretch Ejeprincipalalign-items: flex-start|flex-end|center|stretch|baseline Ejesecundarioalign-self: auto|flex-start|flex-end|center|stretch|baseline Ejesecundario

justify-content: Se utiliza para alinear los ítems del eje principal (pordefecto,elhorizontal).align-content: actúa sobre cada una de las líneas de un contenedormultilinea.align-items:Usadaparaalinearlosítemsdelejesecundario(pordefecto,elvertical).align-self:actúaexactamenteigualquealign-items,sinembargoseutilizasobreunítemhijoespecíficoynosobreelelementocontenedor.

CSS

17

Propiedadesdealineacióndeítems

justify-content:Sirveparacolocar los ítemsdeuncontenedormedianteunadisposiciónconcretaalolargodelejeprincipal:Valor Descripciónflex-start Agrupalosítemsalprincipiodelejeprincipal.flex-end Agrupalosítemsalfinaldelejeprincipal.center Agrupalosítemsalcentrodelejeprincipal.space-between Distribuyelosítemsdejando(elmismo)espacioentreellos.space-around Distribuyelosítemsdejando(elmismo)espacioaambosladosdecada

unodeellos.

CSS

18

Propiedadesdealineacióndeítems

align-content:Sirve para alinear cada una de las líneas del contenedormultilinea. Losvaloresquepuedetomarsonlossiguientes:Valor Descripciónflex-start Agrupalosítemsalprincipiodelejeprincipal.flex-end Agrupalosítemsalfinaldelejeprincipal.center Agrupalosítemsalcentrodelejeprincipal.space-between Distribuyelosítemsdesdeeliniciohastaelfinal.space-around Distribuyelosítemsdejandoelmismoespacioalosladosdecadauno.stretch Estiralosítemsparaocupardeformaequitativatodoelespacio.

CSS

19

Propiedadesdealineacióndeítems

align-content:En el ejemplo siguiente, veremos que al indicar un contenedor de 200píxelsdealtocon ítemsde50pxdealtoyun flex-wrapestablecidoparatener contenedores multilinea, podemos utilizar la propiedad align-contentparaalinearlos ítemsdeformaverticaldemodoquesequedenenlazonainferiordelcontenedor:

#contenedor{background:#CCC;display:flex;width:200px;height:200px;flex-wrap:wrap;align-content:flex-end;}.item{background:#777;width:50%;height:50px;}

CSS

20

Propiedadesdealineacióndeítems

align-items:Seencargadealinearlosítemsenelejesecundariodelcontenedor.Actúasobrecadaunadelaslíneasdeuncontenedormultilinea(notieneefectosobrecontenedoresdeunasolalínea).Losvaloresquepuedetomarsonlossiguientes:Valor Descripciónflex-start Alinealosítemsalprincipiodelejesecundario.flex-end Alinealosítemsalfinaldelejesecundario.center Alinealosítemsalcentrodelejesecundario.stretch Alinealosítemsestirándolosdemodoquecubrandesdeeliniciohasta

elfinaldelcontenedor.baseline Alinealosítemsenelcontenedorsegúnlabasedelcontenidodelosítems

delcontenedor.

CSS

21

Propiedadesaplicadasalosítemsflex

align-self:Actúa exactamente igual que align-items, sin embargo es la primerapropiedad de flexbox que vemos que se utiliza sobre un ítem hijoespecífico y no sobre el elemento contenedor. Salvo por este detalle,funcionaexactamenteigualquealign-items.Gracias a esedetalle, align-self nospermite cambiar el comportamientode align-items y sobreescribirlo con comportamientos específicos paraítemsconcretosquenoqueremosquesecomportenigualqueelresto.Lapropiedadpuedetomarlossiguientesvalores:

Valor Descripciónflex-start Alinealosítemsalprincipiodelcontenedor.flex-end Alinealosítemsalfinaldelcontenedor.center Alinealosítemsalcentrodelcontenedor.stretch Alinealosítemsestirándolosaltamañodelcontenedor.baseline Alinealosítemsenelcontenedorsegúnlabasedelosítems.auto Heredaelvalordealign-itemsdelpadre(osinolotiene,stretch).

CSS

22

Propiedadesaplicadasalosítemsflex

align-self:Si se especifica el valor auto a la propiedad align-self, el navegador leasigna el valor de la propiedad align-items del contenedor padre, y encasodenoexistir,elvalorpordefecto:stretch.

CSS

23

Propiedadesaplicadasalosítemsflex

Sitenemostres ítemsconunanchode100pixelesenuncontenedorde500 pixeles de ancho, entonces el espacio que se necesita para colocarnuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espaciodisponible. Si no cambiamos los valores iniciales entonces flexboxcolocaráeseespaciodespuésdelúltimoítem.

Siencambioquisiéramosquelosítemscrecieranparallenareseespacio,entonces necesitaríamos un método para distribuir el espacio sobranteentrelosítems.Esjustoloqueharánlaspropiedadesflexqueaplicaremosadichosítems.

CSS

24

Propiedadesaplicadasalosítemsflex

Aexcepcióndelapropiedadalign-self,todaslaspropiedadesquehemosvistohastaahoraseaplicansobreelelementocontenedor.Lassiguientespropiedades, sin embargo, se aplican sobre los ítemshijos. Echemos unvistazo:

Propiedad Valor Descripciónflex-grow: 0|[factordecrecimiento] Númeroqueindicaelcrecimientodelítemrespecto

alresto.flex-shrink: 1|[factordedecrecimiento] Númeroqueindicaeldecrecimientodelítem

respectoalresto.flex-basis: [tamañobase]|content Tamañobasedelosítemsantesdeaplicarvariación.order: [número] Númeroqueindicaelordendeaparicióndelos

ítems.

CSS

25

Propiedadesaplicadasalosítemsflex

flex-growIndicael factordecrecimientode los ítemsenelcasodequenotenganunanchoespecífico.Porejemplo,siconflex-growindicamosunvalorde1a todos sus ítems, tendríanelmismo tamañocadaunodeellos.Pero sicolocamosunvalorde1atodosloselementos,salvoaunodeellos,quele indicamos2,eseítemserámásgrandequelosanteriores.Losítemsalosquenoseleespecifiqueningúnvalor,tendránpordefectovalorde0.

CSS

26

Propiedadesaplicadasalosítemsflex

flex-shrinkEs la complementaria a flex-grow. Mientras que la anterior indica unfactordecrecimiento,flex-shrinkhacejustolocontrario,aplicaunfactordedecrecimiento.Deestaforma,losítemsquetenganunvalornuméricomásgrande,seránmáspequeños,mientrasque losquetenganunvalornuméricomás pequeño seránmás grandes, justo al contrario de comofuncionalapropiedadflex-grow.

CSS

27

Propiedadesaplicadasalosítemsflex

flex-basisDefine el tamañopor defecto (de base) que tendrán los ítems antes deaplicarle la distribución de espacio. Generalmente, se aplica un tamaño(unidades, porcentajes, etc...), pero también se puede aplicar la palabraclave content que ajusta automáticamente el tamaño al contenido delítem,queessuvalorpordefecto.Existe una propiedad llamada flex que sirve de atajo para estas trespropiedadesdelosítemshijos.Funcionadelasiguienteforma:

.item{/*flex:<flex-grow><flex-shrink><flex-basis>*/flex:1335%;}

CSS

28

Propiedadesaplicadasalosítemsflex

orderPor último, y quizás unade las propiedadesmás interesantes, esorder,que modificar y establece el orden de los ítems según una secuencianumérica.

Pordefecto,todos los ítemsflextienenunorder:0 implícito,aunquenose especifique. Si indicamos un order con un valor numérico, irárecolocando los ítems según su número, colocando antes los ítems connúmeromáspequeño(inclusovaloresnegativos)ydespuéslosítemsconnúmerosmásaltos.Deestaformapodemosrecolocarfácilmente los ítems inclusoutilizandomediaqueriesoresponsivedesign.EjerciciosFlexboxhttps://webdesign.tutsplus.com/es/tutorials/exercises-in-flexbox-simple-web-components--cms-28049https://desarrolloweb.com/articulos/flexbox-align-items.htmlhttps://mape.neocities.org/flexbox.html

CSS

29

Grid

UnodelosprocesosmásproblematicosyfrustrantesdeCSS,sobretodoparaprincipiantes,eselprocesodecolocarydistribuirloselementosalolargo de una página. Mecanismos como posicionamiento, floats oelementos en bloque o en línea, suelen ser insuficientes (o muycomplejos)paracrearunlayoutoestructurasparapáginaswebactuales.El sistema flexbox es una gran mejora, sin embargo, está orientado aestructurasdeunasoladimensión,porloqueaúnnecesitamosalgomáspotente para estructuras web. Con el paso del tiempo, muchosframeworks y librerías utilizan un sistema grid donde definen unacuadrículadeterminada, ymodificando losnombresde las clasesde loselementosHTML,podemosdarletamaño,posiciónocolocación.Grid CSS nace de esa necesidad, y recoge las ventajas de ese sistema,añadiendole numerosas mejoras y características que permiten crearrápidamentecuadrículassencillasypotentes.

CSS

30

Grid

ConceptosPara utilizar Grid CSS necesitaremos tener en cuenta una serie deconceptos que utilizaremos a partir de ahora y que definiremos acontinuación:

CSS

31

Grid

•  Contenedor: Existe un elemento padre que es el contenedor quedefinirálacuadrículaorejilla.

•  Ítem: Cada uno de los hijos que contiene la cuadrícula (elementocontenedor).

•  Celda (grid cell): Cada uno de los cuadritos (unidad mínima) de lacuadrícula.

•  Área(gridarea):Regiónoconjuntodeceldasdelacuadrícula.•  Banda (grid track): Banda horizontal o vertical de celdas de la

cuadrícula.•  Línea (grid line): Separador horizontal o vertical de las celdas de la

cuadrícula.

CSS

32

Grid

ParautilizarcuadriculasGridCSS,trabajaremosbajoestecódigoHTML:

<divclass="grid"><!--contenedor--><divclass="a">Item1</div><!--cadaunodelosítemsdelgrid--><divclass="b">Item2</div><divclass="c">Item3</div><divclass="d">Item4</div></div>

Para activar la cuadrícula grid hay que utilizar sobre el elementocontenedor lapropiedaddisplay y especificarel valorgrid o inline-grid.Estevalor influyeencomosecomportará lacuadrículaconelcontenidoexterior.Elprimerodeellospermiteque lacuadrículaaparezcaencima/debajodelcontenidoexterior (enbloque)yel segundodeellospermitequelacuadrículaaparezcaalaizquierda/derecha(enlínea)delcontenidoexterior.

Elemento Descripcióninline-grid Estableceunacuadrículaconítemsenlínea,deformaequivalenteainline-block.grid Estableceunacuadrículaconítemsenbloque,deformaequivalenteablock.

CSS

33

Propiedadesdelelementocontenedor

Gridconfilasycolumnasexplícitas

Es posible crear cuadrículas con un tamaño explícito. Para ello, sólotenemos que usar las propiedades CSS grid-template-columns y grid-template-rows,quesirvenparaindicarlasdimensionesdecadaceldadela cuadrícula, diferenciandoentre columnas y filas. Laspropiedades sonlassiguientes:

Propiedad Descripcióngrid-template-columns Estableceeltamañodelascolumnas(ejehorizontal).grid-template-rows Estableceeltamañodelasfilas(ejevertical).

Conociendoestasdospropiedades,escribamoselsiguientecódigoCSS:

.grid{display:grid;grid-template-columns:50px300px;grid-template-rows:200px75px;}

CSS

34

Propiedadesdelelementocontenedor

Gridconfilasycolumnasexplícitas

Estosignificaquetendremosunacuadriculacon2columnas(laprimeracon50pxdeanchoylasegundacon300pxdeancho)ycon2filas(laprimeracon200pxdealto y la segunda con 75px de alto). Ahora, dependiendo del número de ítems(elementoshijos)quetengaelcontenedorgrid,tendremosunacuadrículade2x2elementos (4 ítems), 2x3 elementos (6 ítems), 2x4 elementos (8 ítems) y asísucesivamente.Sielnúmerodeítemsesimpar,laúltimaceldadelacuadrículasequedarávacía.

CSS

35

Propiedadesdelelementocontenedor

Gridconfilasycolumnasexplícitas

Enesteejemploheutilizadopíxelscomounidadesdelasceldasdelacuadrícula,sin embargo, también podemos utilizar otras unidades (e incluso combinarlas)como porcentajes, la palabra clave auto (que obtiene el tamaño restante) o launidadespecialfr(fraction),quesimbolizaunafraccióndeespaciorestanteenelgrid.Veamosuncódigodeejemploenacción:

.grid{display:grid;grid-template-columns:1fr1fr;grid-template-rows:2fr1fr;}

Este nuevo ejemplo, se crea una cuadrícula de 2x2, donde el tamaño de ancho de lacuadrículasedivideendoscolumnas(mismotamañodeanchoparacadauna),yeltamañodealtodelacuadrículasedivideendosfilas,dondelaprimeraocuparáeldoble(2fr)quelasegunda(1fr).De esta forma, podemos tener unmejor control del espacio restante de la cuadrícula, ycomoutilizarlo.

CSS

36

Propiedadesdelelementocontenedor

Filasycolumnasrepetitivas

En laspropiedadesgrid-template-columnsygrid-template-rowspodemosindicarexpresiones de repetición, indicando celdas que repiten un mismo patrón deceldas varias veces. La expresión a utilizar sería la siguiente: repeat([núm deveces],[valorovalores]).Veamosunejemplo:

.grid{display:grid;grid-template-columns:100pxrepeat(2,50px)200px;grid-template-rows:repeat(2,50px100px);}

Asumiendo que tuvieramos un contenedor grid con 8 ítems hijos (o más), elejemploanteriorcrearíaunacuadrículacon4columnas(laprimerade100pxdeancho,lasegundaytercerade50pxdeanchoylacuartade200pxdeancho).Porotro lado, tendría2 filas (laprimerade50pxdealto, y la segundade100pxdealto).Enelcasodetenermásítemshijos,elpatrónseseguiríarepitiendo.

CSS

37

Gridporáreas

Mediante losgridsCSSesposible indicarelnombreyposiciónconcretadecadaárea de una cuadrícula. Para ello utilizaremos la propiedad grid-template-areas,dondedebemosespecificarelordendelasáreasenlacuadrícula.Posteriormente,en cada ítem hijo, utilizamos la propiedad grid-area para indicar el nombre deláreadelquesetrata:

.grid{display:grid;grid-template-areas:"headhead""menumain""footfoot";}.a{grid-area:head;background:blue}.b{grid-area:menu;background:red}.c{grid-area:main;background:green}.d{grid-area:foot;background:orange}

De esta forma, es muy sencillocrear una cuadrícula altamentepersonalizada en apenas unascuantas líneas de CSS, conmucha f lex ib i l idad en ladisposición y posición de cadaárea:

Propiedad Descripcióngrid-template-areas Indicaladisposicióndelasáreasenelgrid.Cadatextoentrecomillas

simbolizaunafila.grid-area Indicaelnombredelárea.Seusasobreítemshijosdelgrid.

CSS

38

Gridporáreas

Aplicandoestecódigo,conseguiríamosunacuadrículadonde:

§  ElItem1,lacabecera(head),ocuparíatodalapartesuperior.§  El Item 2, el menú (menu), ocuparía el área izquierda de la cuadrícula,

debajodelacabecera.§  ElItem3,elcontenido(main),ocuparíaeláreaderechadelacuadrícula,

debajodelacabecera.§  El Item4,elpiedecuadrícula(foot),ocuparíatodalazonainferiorde la

cuadrícula.

CSS

39

Gridporáreas

En la propiedad grid-template-areas, en lugar de indicar el nombre del área acolocar,tambiénpodemosindicarunapalabraclaveespecial:

§  La palabra clavenone: Indica que no se colocará ninguna celda en estaposición.

§  Uno o más puntos (.): Indica que se colocará una celda vacía en estaposición.

CSS

40

Gridconhuecos

Pordefecto, lacuadrículatienetodassusceldaspegadasasusceldascontiguas.Aunqueseríaposibledarleunmargina las celdasdentrodel contenedor,existeuna formamás apropiada, que evita los problemas clásicos de los modelos decaja:loshuecos(gutters).

Para especificar los huecos (espacio entre celdas) podemos utilizar laspropiedadesgrid-column-gapy/ogrid-row-gap.Enellasindicaremoseltamañodedichoshuecos:

Propiedad Descripcióngrid-column-gap Estableceeltamañodeloshuecosentrecolumnas(líneasverticales).grid-row-gap Estableceeltamañodeloshuecosentrefilas(líneashorizontales).

CSS

41

Gridconhuecos

Tomemoselejemploanterior comobase.Enél, le indicamosestaspropiedadesparacolocarhuecosentrelasceldasdelacuadrícula.Elcódigoaañadiralejemploanteriorseríaelsiguiente:

.grid{grid-column-gap:100px;grid-row-gap:10px;}

Con esto, obtendríamos unresultadocomoel siguiente,indicando huecos entrecolumnasde100pxyhuecosentrefilasde10px:

CSS

42

Gridconhuecos

Atajo:GridconhuecosExisteunapropiedaddeatajopara laspropiedadesgrid-column-gapy grid-row-gapynotenerque indicarlasporseparado.Lapropiedadencuestiónseríagrid-gapyseutilizadelasiguienteforma:

.grid{/*grid-gap:<row-gap><column-gap>*/grid-gap:20px80px;/*grid-gap:<row-col-gap>*/grid-gap:40px;/*Equivalenteagrid-gap:40px40px;*/}

CSS

43

Posicióndeloselementosenelgrid

Existen una serie de propiedades que se pueden utilizar para colocar los ítemsdentrodelacuadrícula.Conellaspodemosdistribuirloselementosdeunaformamuysencillaycómoda.Dichaspropiedadessonjustify-itemsyalign-items,queyaconocemosdeflexbox:

Propiedad Valores Descripciónjustify-items start|end|center|stretch Distribuyeloselementosenelejehorizontal.align-items start|end|center|stretch Distribuyeloselementosenelejevertical.

Estaspropiedadesseaplicansobreelelementocontenedorpadre,peroafectanalosítemshijos,porloqueactuansobreladistribucióndecadaunodeloshijos.Enel caso de que queramos que uno de los ítems hijos tengan una distribucióndiferentealresto,aplicamoslapropiedadjustify-selfoalign-selfsobreelítemhijoen cuestión, sobreescribiendo su distribución. Estas propiedades funcionanexactamenteigualquesusanálogasjustify-itemsoalign-items,sóloqueenlugarde indicarseenelelementopadrecontenedor, sehacesobreunelementohijo.Laspropiedadessobreítemshijoslasveremosmásadelante.

CSS

44

Posicióndeloselementosenelgrid

También podemos utilizar las propiedades justify-content o align-content paramodificar la distribución de todo el contenido en su conjunto, y no sólo de losítemsporseparado:

Propiedad Valoresjustify-content start|end|center|stretch|space-around|space-between|space-evenlyalign-content start|end|center|stretch|space-around|space-between|space-evenly

De esta forma, podemos controlar prácticamente todos los aspectos deposicionamiento de la cuadrícula directamente desde los estilos CSS de sucontenedorpadre.

CSS

45

Posicióndeloselementosenelgrid

CSS

46

Ajusteautomáticodeceldas

Esposibleutilizar laspropiedadesgrid-auto-columnsygrid-auto-rowsparadarleun tamaño automático a las celdas de la cuadrícula. Para ello, sólo hay queespecificareltamañodeseadoencadaunadelaspropiedades.Además,tambiénpodemosutilizargrid-auto-flowparaindicarelflujodeelementosenlacuadrícula,yespecificarpordondeseiránañadiendo.Laspropiedadessonlassiguientes:

Propiedad Valores Descripcióngrid-auto-columns [tamaño] Indicaeltamañoautomáticodeanchoquetendrán

lascolumnas.grid-auto-rows [tamaño] Indicaeltamañoautomáticodealtoquetendrán

lasfilas.grid-auto-flow row|column|dense Utilizaunalgoritmodeautocolocación

(intentarellenarhuecos).

CSS

47

Ajusteautomáticodeceldas

Un ejemplo de como se insertarían los elementos en una cuadrícula de 2x2utilizandogrid-auto-flowporcolumnasoporfilas:

CSS

48

Ajusteautomáticodeceldas

Atajo:GridPor último, existe una propiedad grid que sirve de atajo para la mayoría depropiedades CSS relativas a cuadrículas. Su esquema de utilización sería elsiguiente,juntoaalgunosejemplos:

.grid{/*grid:<grid-template><grid-auto-flow><grid-auto-rows>/<grid-auto-columns>*//*EJEMPLOS*/grid:100px20px;grid:200pxrepeat(2,100px)300px;grid:row;grid:columndense;grid:row200px;grid:row400px/150px;}

CSS

49

Propiedadesparaítemsgridhijos

Salvo algunas excepciones como justify-self, align-self o grid-area, hemos vistopropiedadesCSSqueseaplicansolamentealcontenedorpadredeunacuadrícula.Acontinuación,vamosaverciertaspropiedadesqueensulugar,seaplicanacadaítemhijodelacuadrícula,paraalterarocambiarelcomportamientoespecíficodedichoelemento,quenosecomportacomolamayoría.

Algunasdelaspropiedadesvistashastaahorasonlassiguientes:

Propiedad Descripciónjustify-self Alteralajustificacióndelítemhijoenelejehorizontal.align-self Alteralaalineacióndelítemhijoenelejevertical.grid-area Indicaunnombrealáreaespecificada,parasuutilizacióncongrid-template-areas.

Sin embargo, existen algunas propiedades más, referentes en este caso, a laposiciónde loshijosde lacuadrículadondevaacomenzaroterminarunafilaocolumna.Laspropiedadessonlassiguientes:

Propiedad Descripcióngrid-column-start Indicaenquecolumnaempezaráelítemdelacuadrícula.grid-column-end Indicaenquecolumnaterminaráelítemdelacuadrícula.grid-row-start Indicaenquefilaempezaráelítemdelacuadrícula.grid-row-end Indicaenquefilaterminaráelítemdelacuadrícula.

CSS

50

Propiedadesparaítemsgridhijos

Condichaspropiedades,podemosindicarelsiguientecódigoCSSsobreelprimerítemdeunacuadrículade4ítems:

Deesta forma, tenemosuna cuadrículade4elementos, enel que indicamos laposicióndelítem1(elementoHTMLconclase.a):comenzandoenlacolumna1yacabandoeneliniciodelacolumna2:

.grid{display:grid;}.a{grid-column-start:1;grid-row-end:2;}

CSS

51

Propiedadesparaítemsgridhijos

Eseseríaelfuncionamientonormal.Dondesevelautilidaddeestaspropiedades,essivariamos losvaloresde formaquetomenposicionesdiferentes,comoporejemplo,siindicamosqueelítem1debecomenzarenlacolumna1,peroacabarenlacolumna3(ocupandolahipotéticaprimeraysegundacelda):

CSS

52

Propiedadesparaítemsgridhijos

En este nuevo ejemplo, comenzamos el primer ítem en la columna 2 y loacabamos al principio de la columna 3, por lo que la celda permanecerá en laposiciónde lasegundacolumna.Además,añadimos lapropiedadgrid-row-startquehacelomismoquehastaahora,peroconlasfilas.Enestecaso,leindicamosquecomienceenlafila3,porloqueelítem1sedesplazaaunanuevafiladelacuadrícula,dejandoenlaanteriorelítem4:

También es posible utilizar la palabra clave span seguida de un número, queindicaqueabarquehastaesacolumnaocelda.

CSS

53

Propiedadesparaítemsgridhijos

Atajo:grid-columnygrid-rowElmódulogriddeCSSproporciona laspropiedadesdeatajogrid-columnygrid-row donde se nos permite escribir en un formato abreviado las propiedadesanteriores.Susintaxisseríalasiguiente:

.grid{display:grid;}.a{/*grid-column:<grid-column-start><grid-column-end>*//*grid-row:<grid-row-start><grid-row-end>*/grid-column:auto;grid-column:4/6;grid-column:span3;grid-column:span3/6;}

EjerciciosGridCSS:https://webdesign.tutsplus.com/es/tutorials/solving-problems-with-css-grid-and-flexbox-the-card-ui--cms-27468https://gridbyexample.com/examples/

CSS

54

BibliografíaFlexboxyGrid

*Todalainformacióndeestemanualhasidorecopiladadevariosartículospublicadoseninternet,destacando:https://lenguajecss.com/p/css/propiedades/grid-csshttps://lenguajecss.com/p/css/propiedades/flexboxhttps://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_FlexboxVideotutorialesRock'n'Grid-DianaAcevesWeCodeFest2018TallerdeFlexbox---DianaAceves