Meta tags:
description=Aprende la propiedad CSS grid-template-rows: tamaños de pista, unidades fr, repeat(), minmax(), líneas con nombre, subgrid y ejemplos prácticos.;

Headings (most frequently used words):

repeat, auto, content, fr, minmax, con, en, fit, filas, propiedad, css, grid, template, rows, sintaxis, uso, básico, unidades, pistas, líneas, nombre, palabras, clave, basadas, el, contenido, subgrid, fill, valores, problemas, comunes, práctica, propiedades, relacionadas, dimensionadas, automáticamente, de, altura, fija, la, unidad, combinando, las, tres, min, max, value,

Text of the page (most frequently used words):
grid (78), auto (54), div (53), #template (39), rows (35), border (34), las (33), css (32), cuadrícula (31), filas (30), una (30), que (28), text (24), color (24), font (23), contenido (22), 1fr (22), style (21), repeat (20), con (20), minmax (18), fila (18), background (18), para (17), altura (17), content (17), html (16), tamaño (16), los (15), aprender (15), por (15), body (15), pistas (14), tiene (14), width (14), del (13), max (13), column (13), fill (12), espacio (12), min (12), flex (12), padding (12), fit (11), row (11), propiedad (11), cuando (11), como (11), columns (10), elementos (10), contenedor (10), copiar (10), más (10), display (10), top (10), break (10), 80px (9), align (9), title (9), right (9), left (9), bottom (9), image (9), animation (9), subgrid (8), height (8), pista (8), end (8), start (8), size (8), overflow (8), position (8), stroke (8), forma (7), usa (7), valor (7), 100px (7), pero (7), child (7), gap (7), margin (7), line (7), decoration (7), offset (7), líneas (6), page (6), diseño (6), dentro (6), tamaños (6), count (6), head (6), list (6), container (6), type (6), variant (6), w3docs (5), práctica (5), nombre (5), dimensiona (5), entre (5), cada (5), puede (5), alta (5), the (5), 200px (5), alto (5), header (5), transition (5), last (5), outline (5), radius (5), formatter (5), generator (4), clave (4), sintaxis (4), abreviada (4), elemento (4), explícita (4), define (4), crea (4), unidad (4), mínimo (4), misma (4), también (4), definida (4), libre (4), none (4), ser (4), según (4), máximo (4), fija (4), length (4), disponible (4), crece (4), class (4), mode (4), transform (4), rule (4), nth (4), first (4), json (3), code (3), encoder (3), editor (3), cuestionarios (3), ejercicios (3), php (3), javascript (3), propiedades (3), valores (3), palabras (3), unidades (3), uso (3), this (3), dirección (3), flow (3), colocar (3), nombres (3), esta (3), qué (3), hace (3), debajo (3), quieras (3), contenedores (3), scroll (3), esas (3), predeterminado (3), siempre (3), padre (3), initial (3), límite (3), percentage (3), tan (3), sus (3), least (3), esa (3), equivalente (3), sin (3), línea (3), celdas (3), layout (3), menos (3), center (3), eee (3), ccc (3), document (3), doctype (3), space (3), track (3), 100 (3), mismo (3), adaptarse (3), name (3), object (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), letter (3), direction (3), clip (3), box (3), only (3), ver (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), herramientas (2), python (2), java (2), git (2), libros (2), ejemplos (2), fragmentos (2), desde (2), relacionadas (2), problemas (2), comunes (2), basadas (2), básico (2), hanging (2), punctuation (2), completa (2), punto (2), partida (2), controla (2), automáticamente (2), columnas (2), áreas (2), declaración (2), asigna (2), areas (2), contraparte (2), número (2), ejemplo (2), adicionales (2), implícitas (2), tienen (2), solo (2), explícitas (2), porcentaje (2), resuelven (2), hay (2), hereda (2), inherit (2), tracks (2), argumento (2), proporcionado (2), value (2), parte (2), restante (2), rango (2), intrínseco (2), determina (2), todas (2), son (2), vacías (2), tantas (2), will (2), crear (2), frecuencia (2), same (2), parent (2), lugar (2), útil (2), tenga (2), suficiente (2), ajustarse (2), celda (2), vertical (2), palabra (2), significa (2), comparten (2), tener (2), separados (2), espacios (2), corchetes (2), place (2), footer (2), 600 (2), dos (2), ese (2), grows (2), remaining (2), uno (2), all (2), takes (2), half (2), aquí (2), primera (2), segunda (2), 300 (2), independientemente (2), pruébalo (2), exacta (2), ambas (2), animatable (2), longitud (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), blend (2), feature (2), empty (2), counter (2), read (2), hash (2), 2026, todos, derechos, reservados, hecho, desarrolladores, idioma, política, privacidad, contacto, acerca, empresa, try, tutoriales, gratuitos, web, 2014, next, previous, yes, was, helpful, algoritmo, empaquetado, colocados, expandir, largo, sola, referencia, creadas, implícita, fuera, comprobar, orden, capas, especifica, implícito, pueden, reducirse, explícitamente, reduzcan, declaras, generadas, desbordados, razón, intrínseca, porcentajes, requieren, repartan, colapsan, dimensionado, establece, uses, requiere, restablece, lista, repite, patrón, dimensionada, dimensión, negativa, toma, relativa, debe, 2rem, está, dado, serlo, menor, mayor, definen, descripción, igual, colapsa, cero, estiren, ocupen, rellena, sea, posible, aunque, algunas, estén, many, usan, quepan, ven, funcionan, idéntica, amplia, compatibilidad, finales, 2023, chrome, 117, firefox, safari, adopt, those, spans, vez, usar, indica, interna, utilice, suyas, propias, esto, permite, alinear, anidados, ritmo, exterior, comporta, quieres, basado, nunca, supere, determinado, ajuste, dar, todo, desee, grande, exactamente, cualquiera, larga, imagen, pequeña, pequeño, hasta, contenga, reducirá, primero, varios, mismos, final, encabezado, inicio, cuerpo, main, item, from, puedes, asignar, envolviéndolo, facilitan, mucho, colocación, contar, partes, iguales, tercera, expande, encima, and, combinando, tres, with, navegador, real, alternating, repetir, conocida, quiere, rellenen, hacer, ningún, cálculo, fixed, gets, other, three, equal, fracción, representa, queda, después, fijo, total, ocupado, absolutos, basados, fijas, cuánto, tengan, desborde, alturas, recorta, configuración, 300px, pasa, píxeles, fijar, crecen, hermana, este, habitual, dimensionadas, estándar, aplican, ocurre, cualquier, gridtemplaterows, 20px, dom, module, level, versión, heredable, aplica, inicial, creas, forman, desbordan, hacia, definiste, información, necesite, crezca, necesario, evitar, escribir, muchas, veces, deba, crecer, compartan, sobrante, proporcional, rem, flexible, basada, función, combinarlas, diseños, sean, flexibles, afecta, escriben, juntas, definir, inline, cuántas, listan, tras, otro, así, 200, aprende, prácticos, zoom, index, writing, change, widows, white, user, select, bidi, property, underline, orientation, indent, ink, combine, upright, table, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, behavior, resize, quotes, pointer, events, orphans, order, opacity, rotate, distance, mix, media, lines, clamp, keyframes, isolation, import, hyphens, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, play, state, iteration, self, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, default, checked, active, selectores, selectors, css3, guía, flexbox, guides, gradientes, colores, tablas, links, texto, introducción, basic, iniciar, sesión, buscar, formatters, url, reverse, sha256, md5, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
ition y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propiedad css grid template rows aprende la propiedad css grid template rows tamaños de pista unidades fr repeat minmax líneas con nombre subgrid y ejemplos prácticos la propiedad grid template rows define cuántas filas tiene una cuadrícula css y qué altura tiene cada una se listan los tamaños de pista uno tras otro separados por espacios y css crea una fila explícita por cada valor así grid template rows 100px 200px crea dos filas la primera de 100 px de alto y la segunda de 200 px esta propiedad solo afecta a los contenedores de cuadrícula elementos con display grid o display inline grid es la contraparte en dirección de filas de grid template columns y ambas se escriben juntas con frecuencia para definir una cuadrícula completa el tamaño de una pista puede ser una longitud fija un porcentaje una unidad flexible fr una palabra clave basada en el contenido o una función como repeat y minmax combinarlas es lo que hace que los diseños de cuadrícula sean flexibles usa una longitud px rem cuando quieras que una fila tenga una altura exacta usa fr cuando quieras que las filas compartan el espacio sobrante de forma proporcional usa auto o min content max content cuando la fila deba crecer para adaptarse a su contenido usa repeat para evitar escribir el mismo tamaño muchas veces usa minmax cuando una fila necesite un mínimo y un máximo por ejemplo al menos 100px pero que crezca si es necesario i información las filas que creas aquí forman la cuadrícula explícita si los elementos desbordan hacia filas que no definiste esas filas adicionales las dimensiona grid auto rows en su lugar valor inicial none se aplica a contenedores de cuadrícula heredable no animatable sí el tamaño de las filas es animatable versión css grid layout module level 1 sintaxis dom object style gridtemplaterows 20px 100px sintaxis grid template rows none auto max content min content length percentage flex e g 1fr fit content length percentage repeat count track list minmax min max subgrid line name track size line name copiar las palabras clave estándar initial e inherit también se aplican como ocurre con cualquier propiedad css uso básico filas dimensionadas automáticamente con auto cada fila crece para adaptarse a la celda más alta este es el punto de partida más habitual doctype html html head title title of the document title style auto container display grid grid template columns auto auto auto auto grid template rows auto auto gap 10 px background color ccc padding 10 px margin top 30 px auto container div background color eee text align center padding 30 px 0 font size 30 px style head body h2 grid template rows auto auto h2 div class auto container div 1 div div 2 div div 3 div div 4 div div 5 div div 6 div div 7 div div 8 div div body html copiar pruébalo tú mismo con grid template rows auto auto ambas filas crecen para adaptarse a su contenido por lo que todas las celdas tienen la misma altura que la hermana más alta de esa fila filas de altura fija pasa valores en píxeles para fijar las filas a una altura exacta independientemente del contenido doctype html html head title title of the document title style grid container display grid grid template columns auto auto auto auto grid template rows 100 px 300 px gap 10 px background color ccc padding 10 px grid container div background color eee text align center padding 20 px 0 font size 30 px style head body h2 grid template rows 100px 300px h2 div class grid container div 1 div div 2 div div 3 div div 4 div div 5 div div 6 div div 7 div div 8 div div body html copiar pruébalo tú mismo aquí las filas son fijas la primera siempre tiene 100 px de alto y la segunda siempre 300 px independientemente de cuánto contenido tengan las celdas el contenido que desborde esas alturas se recorta o tiene scroll según la configuración de overflow unidades fr repeat y minmax la unidad fr fr fracción representa una parte del espacio libre que queda en la cuadrícula después de colocar las pistas de tamaño fijo el espacio libre es el tamaño total de la cuadrícula menos el espacio ocupado por las pistas con tamaños absolutos o basados en el contenido three equal rows grid template rows 1fr 1fr 1fr header takes half body takes the other half grid template rows 1fr 1fr header is fixed body gets all remaining space grid template rows 80px 1fr copiar la unidad fr es útil cuando la cuadrícula tiene una altura conocida definida en el contenedor y se quiere que las pistas la rellenen sin hacer ningún cálculo repeat repeat count track list es una forma abreviada de repetir uno o más tamaños de pista same as 1fr 1fr 1fr 1fr grid template rows repeat 4 1fr alternating 80px 1fr 80px 1fr grid template rows repeat 2 80px 1fr copiar minmax minmax min max asigna a una pista un tamaño mínimo y un tamaño máximo el navegador determina el tamaño real dentro de ese rango según el contenido y el espacio disponible row is at least 80px grows with content up to 200px grid template rows minmax 80px 200px row is at least 80px grows to fill remaining space grid template rows minmax 80px 1fr copiar combinando las tres doctype html html head title title of the document title style flex grid display grid height 600 px grid template columns 1 fr 1 fr grid template rows repeat 2 1 fr minmax 80 px auto gap 10 px background color ccc padding 10 px flex grid div background color eee text align center padding 10 px font size 24 px style head body h2 fr repeat and minmax h2 div class flex grid div 1 div div 2 div div 3 div div 4 div div 5 div div 6 div div body html copiar la cuadrícula tiene 600 px de alto repeat 2 1fr crea dos filas que comparten a partes iguales la altura disponible la tercera fila usa minmax 80px auto tiene al menos 80 px de alto pero se expande si su contenido crece por encima de ese valor pistas con líneas con nombre puedes asignar un nombre a las líneas entre filas envolviéndolo entre corchetes las líneas con nombre facilitan mucho la colocación de elementos con grid row sin tener que contar líneas de cuadrícula layout display grid grid template rows header start 80 px header end body start 1 fr body end footer start 60 px footer end place an item from body start to body end main grid row body start body end copiar una línea puede tener varios nombres separados por espacios dentro de los mismos corchetes header end body start significa que esa misma línea es el final del encabezado y el inicio del cuerpo palabras clave basadas en el contenido auto auto significa que la pista se dimensiona según su contenido equivalente a minmax auto auto la fila crece hasta el elemento más alto que contenga pero no se reducirá por debajo del tamaño mínimo del contenido cuando también hay pistas fr en la misma declaración las pistas auto se resuelven primero y las pistas fr comparten el espacio restante min content la fila tiene exactamente la altura suficiente para ajustarse al contenido más pequeño de cualquiera de sus celdas en la práctica tan alta como la palabra más larga o la imagen más pequeña max content la fila tiene la altura suficiente para ajustarse al contenido más grande sin ajuste de línea equivalente a dar a cada celda todo el espacio vertical que desee fit content value fit content 200px se comporta como auto crece con el contenido pero tiene como límite máximo el argumento proporcionado equivalente a min max content max auto 200px es útil cuando quieres que una fila tenga un tamaño basado en el contenido pero que nunca supere un límite determinado subgrid cuando un elemento de cuadrícula es a su vez un contenedor de cuadrícula usar subgrid en grid template rows indica a esa cuadrícula interna que utilice las pistas de fila de la cuadrícula padre en lugar de crear las suyas propias esto permite alinear el contenido dentro de los elementos de cuadrícula anidados con el ritmo de la cuadrícula exterior parent display grid grid template rows 80 px 1 fr 60 px child display grid this child spans 3 rows of the parent grid row 1 4 adopt those same 3 row tracks grid template rows subgrid copiar subgrid tiene amplia compatibilidad desde finales de 2023 chrome 117 firefox 71 safari 16 auto fill y auto fit en repeat auto fill y auto fit se usan dentro de repeat para crear tantas pistas como quepan en el contenedor se ven con más frecuencia en grid template columns pero funcionan de forma idéntica con las filas cuando el contenedor tiene una altura fija as many rows of at least 100px as will fit grid template rows repeat auto fill minmax 100px 1fr copiar auto fill rellena la cuadrícula con tantas pistas como sea posible aunque algunas estén vacías auto fit igual que auto fill pero colapsa las pistas vacías a tamaño cero para que los elementos se estiren y ocupen el espacio disponible valores valor descripción none predeterminado no se definen filas explícitas todas las filas son implícitas auto la altura de la fila la determina su contenido o el espacio disponible max content la fila es tan alta como el tamaño intrínseco mayor entre sus elementos min content la fila es tan alta como el tamaño intrínseco menor entre sus elementos minmax min max el tamaño de la pista está dentro del rango dado min no puede ser fr max sí puede serlo length una altura fija como 100px o 2rem percentage una altura relativa a la altura del contenedor de cuadrícula debe ser definida flex fr una dimensión no negativa que toma una parte del espacio libre restante fit content value dimensionada según el contenido con el límite máximo del argumento proporcionado repeat count tracks repite un patrón de tamaños de pista count puede ser un número auto fill o auto fit subgrid la lista de pistas se hereda de la cuadrícula padre initial restablece la propiedad a su valor predeterminado none inherit hereda el valor del elemento padre problemas comunes fr requiere una altura definida en el contenedor si el contenedor de cuadrícula no tiene una height explícita no hay espacio libre para que las filas fr lo repartan colapsan al dimensionado auto establece siempre una height o min height en el contenedor cuando uses fr en filas los porcentajes también requieren una altura definida en el contenedor por la misma razón si la altura del contenedor es intrínseca los tamaños de fila en porcentaje también se resuelven como auto solo filas explícitas esta propiedad dimensiona las filas que declaras las filas adicionales generadas por los elementos desbordados las dimensiona grid auto rows esas filas implícitas tienen valor predeterminado auto si no se define grid auto rows minmax 0 1fr vs 1fr la unidad fr tiene un mínimo implícito de auto por lo que las filas 1fr no pueden reducirse por debajo de su tamaño de contenido usa minmax 0 1fr cuando quieras explícitamente que las filas se reduzcan por debajo del contenido por ejemplo dentro de contenedores con scroll práctica práctica qué hace la propiedad grid template rows en css qué hace la propiedad grid template rows en css define el número de filas en un diseño de cuadrícula especifica el tamaño de las filas en un diseño de cuadrícula crea el diseño de cuadrícula en css controla el espacio entre cada fila en un diseño de cuadrícula define el orden de las capas en un diseño de cuadrícula comprobar propiedades relacionadas grid template columns la contraparte en dirección de columnas de esta propiedad grid auto rows dimensiona las filas creadas de forma implícita fuera de la cuadrícula explícita grid template areas asigna nombres a las áreas de la cuadrícula para colocar elementos por referencia grid template forma abreviada de filas columnas y áreas en una sola declaración grid row forma abreviada para colocar o expandir un elemento de cuadrícula a lo largo de las pistas de fila grid auto flow controla la d...