CSS Flexbox and Grid in Spanish: Memorize 58 Flashcards on Ejes, Pistas and Cuadrícula
Spanish edition of the Flexbox & Grid deck: 58 real cards on eje transversal, pistas and cuadrícula, plus the translation traps sobrescribir, envolver, grilla.
Studying. But it's also a video game. 🎮
Flashcards, quizzes and games that make you actually remember.
Posted by
FLIP IT TeamRelated reading
Learn Vue.js Core Concepts: 30 Flashcards on Reactivity, Directives and the Vue Ecosystem
Learn Vue.js with deck XT7941: 30 flashcards on directives, virtual DOM, reactivity, computed vs watch, Pinia, Vue Router and Vite, plus the cards to update.
OWASP Top 10 Flashcards: Study the 2021 List and Update It for 2025
Study OWASP Top 10 with 35 flashcards on injection, SSRF, SAST, DAST, IAST and RASP, then add the missing #1 risk and the new OWASP 2025 ranking.
Learn CSS Flexbox and Grid in German: 58 Flashcards on Hauptachse, Spuren and Zellen
Learn CSS Flexbox and Grid with German backs: 58 real flashcards on Hauptachse, Querachse, Spur and Zelle, plus the Zeile trap and three backs to fix.
Spanish-speaking front-end teams talk about cuadrícula, eje transversal and elementos flexibles, but write grid-template-columns and flex-wrap in code. The Flip It deck CSS: Flexbox y Grid (code KS9615, 58 cards) trains exactly that mix: English property names on the front, Spanish explanations on the back. It is the Spanish edition of our English Flexbox & Grid deck, so the content is identical; what you gain is the vocabulary to read MDN en español or explain a layout in a Spanish code review.
Study this deck: CSS: Flexbox y Grid
1 / 10Flexbox
Tap the card for the answer · swipe right if you knew it, left if not
Eight cards from KS9615
| Front | Back (Spanish) |
|---|---|
| Main axis in Flexbox | El eje principal a lo largo del cual se disponen los elementos flexibles. |
| Flex-basis | Define el tamaño por defecto de un elemento antes de que se distribuya el espacio restante. Por defecto auto. |
| Flex: 1 | Abreviatura de flex: 1 1 0: el elemento puede crecer y encogerse, con una base de 0. |
| Minmax() | minmax(100px, 1fr) significa al menos 100px, pero puede crecer para llenar el espacio. |
| Grid-auto-flow | Valores: row (por defecto), column, dense (rellena huecos). |
| Grid cell | La intersección de una fila y una columna. La unidad más pequeña de una cuadrícula. |
| Can Grid items overlap? | ¡Sí! Los elementos pueden ocupar las mismas celdas. Usa z-index para controlar el apilamiento. |
| Subgrid | Permite que un elemento de la cuadrícula herede las pistas de la cuadrícula padre. |
Terms covered
eje principal, eje transversal, contenedor flexible, elementos flexibles, crecer / encogerse, base, cuadrícula, fila, columna, línea de cuadrícula, pista, celda, cuadrícula implícita / explícita, áreas con nombre, unidad fraccional, columnas responsivas, espaciado (gap), rellenar huecos, orden visual, pie de página fijo, apilamiento, subgrid, plus every property: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-self, align-content, order, repeat(), minmax(), fit-content(), auto-fit, auto-fill, grid-area, grid-template-areas, place-items.
Tip 1: four translations to fix in your head
- Cards 8, 40, 41 say align-self « sobrescribe » align-items. In CSS nothing is overwritten: the item simply anula or reemplaza the container's value for itself. Keep sobrescribir for OOP (method overriding) and you won't mix the two contexts.
- Card 9: « los elementos se envuelven en varias líneas » is a calque of wrap. Say pasan a la línea siguiente or se distribuyen en varias líneas.
- Cuadrícula is the MDN term, but many Latin American teams say grilla. Recognize both, write cuadrícula in docs.
- Abreviatura (cards 11, 15, 58) = what MDN calls a propiedad abreviada (shorthand).
Good news: unlike French, Spanish keeps fila (row) and línea (grid line) distinct, so card 25, « grid-row: 2 / 4 abarca las filas 2-3 », reads unambiguously: lines 2 to 4, rows 2 and 3.
Tip 2: what the backs leave out
Card 10 limits align-content to flex-wrap: wrap; wrap-reverse works too. Card 12's « crece el doble que 1 » means double the espacio libre, not double the width. And justify-items / justify-self se ignoran en Flexbox: use margin-left: auto to push one item to the end. Write those three as cards 59-61.
How to study it
Flexbox block (1-16) first, then the grid vocabulary (44-46, 52-53), then placement (19-33), and finally the recipes (47-51), typing each into CodePen.
Compare with the English Flexbox and Grid article or the French edition (BC4316), then search for KS9615 in the Flip It library.
Ready to learn faster? 🚀
Join FLIP IT for free and turn studying into a game.