Upload
others
View
9
Download
0
Embed Size (px)
Citation preview
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