{"id":3356,"date":"2026-10-14T15:38:26","date_gmt":"2026-10-14T15:38:26","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=3356"},"modified":"2026-10-14T15:38:26","modified_gmt":"2026-10-14T15:38:26","slug":"css-grid-vs-position-absolute","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/css-grid-vs-position-absolute\/","title":{"rendered":"CSS Grid vs position absolute: cu\u00e1ndo usar cada uno"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Elegir entre <strong>CSS Grid y position absolute<\/strong> es una de las decisiones que m\u00e1s repito al maquetar: una etiqueta sobre una foto, un degradado sobre un hero, un men\u00fa que cae debajo de la barra. Las dos t\u00e9cnicas colocan un elemento encima de otro, pero por dentro no funcionan igual.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En este art\u00edculo comparo ambas con el mismo ejemplo, te ense\u00f1o el bug que aparece cuando usas <code>position: absolute<\/code> de m\u00e1s y te dejo una regla para decidir en 5 segundos. Es mi opini\u00f3n, y es un poco pol\u00e9mica.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"\ud83d\udeab \u00a1DEJA de USAR Position en CSS! (en serio)\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/okGCZrcCIH8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe0a7de2 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.youtube.com\/watch?v=okGCZrcCIH8\" target=\"_blank\" rel=\"noreferrer noopener\">Ver el video en YouTube<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-callout is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">En este tutorial<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Usa CSS Grid<\/strong> cuando varios elementos viven dentro del mismo contenedor y deben apilarse: etiquetas sobre una foto, overlays, h\u00e9roes.<\/li>\n\n\n\n<li><strong>Usa<\/strong> <code>position: absolute<\/code> cuando el elemento debe salir del flujo: men\u00fas, tooltips, popovers o un indicador pegado al borde de otro elemento.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 vas a construir<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">No es un proyecto \u00fanico, sino cuatro casos reales resueltos de las dos formas. As\u00ed ves en qu\u00e9 momento una t\u00e9cnica empieza a dar problemas y la otra no:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Caso<\/th><th>Mejor opci\u00f3n<\/th><th>Por qu\u00e9<\/th><\/tr><\/thead><tbody><tr><td>Etiquetas sobre la foto de una tarjeta<\/td><td>CSS Grid<\/td><td>Cada etiqueta tiene su celda y no se pisan al estrechar la tarjeta<\/td><\/tr><tr><td>Hero con imagen, degradado y texto<\/td><td>CSS Grid<\/td><td>Los tres elementos comparten un \u00e1rea y <code>order<\/code> sustituye al <code>z-index<\/code><\/td><\/tr><tr><td>Men\u00fa desplegable y popover de emojis<\/td><td><code>position: absolute<\/code><\/td><td>Deben salir del flujo y flotar sobre la p\u00e1gina<\/td><\/tr><tr><td>Notificaci\u00f3n sobre el borde de una foto<\/td><td><code>position: absolute<\/code><\/td><td>Sobresale de su contenedor: Grid no est\u00e1 pensado para eso<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/css-grid-vs-position-absolute.webp\" alt=\"Miniatura del video: papelera con position: absolute tachado y el texto &quot;Fuera de tu CSS&quot;\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">El video, \u00ab\u00a1DEJA de USAR Position en CSS! (en serio)\u00bb, dura 12 minutos y va en este orden. Pulsa un cap\u00edtulo para saltar a esa parte en YouTube:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=okGCZrcCIH8&amp;t=0s\" target=\"_blank\" rel=\"noopener\">0:00 Por qu\u00e9 creo que usas <code>position<\/code> de m\u00e1s<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=okGCZrcCIH8&amp;t=56s\" target=\"_blank\" rel=\"noopener\">0:56 La tarjeta de producto con <code>position: absolute<\/code><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=okGCZrcCIH8&amp;t=179s\" target=\"_blank\" rel=\"noopener\">2:59 El problema: las etiquetas se pisan<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=okGCZrcCIH8&amp;t=200s\" target=\"_blank\" rel=\"noopener\">3:20 La soluci\u00f3n con CSS Grid y <code>grid-template-areas<\/code><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=okGCZrcCIH8&amp;t=392s\" target=\"_blank\" rel=\"noopener\">6:32 Hero con overlay: imagen, degradado y texto<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=okGCZrcCIH8&amp;t=530s\" target=\"_blank\" rel=\"noopener\">8:50 Cu\u00e1ndo s\u00ed usar <code>position: absolute<\/code>: popover y men\u00fas<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=okGCZrcCIH8&amp;t=603s\" target=\"_blank\" rel=\"noopener\">10:03 La notificaci\u00f3n en el borde de una foto<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 necesitas<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un editor de c\u00f3digo, por ejemplo Visual Studio Code.<\/li>\n\n\n\n<li>Conocer lo b\u00e1sico de HTML y CSS: clases, <code>display<\/code> y m\u00e1rgenes.<\/li>\n\n\n\n<li>Ayuda saber qu\u00e9 es <code>position: relative<\/code>, pero lo repasamos en el primer paso.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Paso a paso<\/h2>\n\n\n\n<div class=\"wp-block-group acg-steps is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Una etiqueta sobre la foto con position absolute<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El caso de siempre: una tarjeta con la etiqueta \u00abNuevo\u00bb encima de la imagen. Le das <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/Reference\/Properties\/position\" target=\"_blank\" rel=\"noopener\"><code>position: relative<\/code><\/a> al contenedor para que sea la referencia y <code>position: absolute<\/code> a la etiqueta, con <code>top<\/code> y <code>left<\/code> para empujarla desde la esquina. Funciona, pero hay un coste: la etiqueta <strong>sale del flujo<\/strong>. El contenedor ya no la cuenta, no sabe qu\u00e9 hay a su lado y t\u00fa calculas las posiciones a ojo.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__media {\n  position: relative;\n}\n\n.badge {\n  position: absolute;\n  top: 12px;\n  left: 12px;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">La misma etiqueta con CSS Grid<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Con Grid y <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/Reference\/Properties\/grid-template-areas\" target=\"_blank\" rel=\"noopener\"><code>grid-template-areas<\/code><\/a> conviertes el contenedor en una cuadr\u00edcula de una sola celda llamada <code>stack<\/code>. La imagen y la etiqueta se asignan a esa misma \u00e1rea, as\u00ed que se apilan sin que ninguna salga del flujo. Despu\u00e9s <code>place-self<\/code> coloca la etiqueta (centrada en vertical, al inicio en horizontal) y el margen sustituye al <code>top<\/code> y <code>left<\/code> de antes. El contenedor sigue creciendo con su contenido.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__media {\n  display: grid;\n  grid-template-areas: \"stack\";\n}\n\n.badge {\n  grid-area: stack;\n  place-self: center start;\n  margin: 12px;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Dos grupos de etiquetas sin que se pisen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed es donde <code>position: absolute<\/code> falla. En la tarjeta de producto hay un grupo de etiquetas arriba a la izquierda (\u00abM\u00e1s vendido\u00bb, \u00ab\u00daltimas unidades\u00bb, \u00ab-15%\u00bb) y otro arriba a la derecha (\u00abOferta instant\u00e1nea\u00bb). Con posici\u00f3n absoluta, si estrechas la tarjeta, un grupo se monta encima del otro porque ninguno sabe que el otro existe.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;ul class=\"card__badges\"&gt;\n  &lt;li class=\"badge badge--accent\"&gt;M\u00e1s vendido&lt;\/li&gt;\n  &lt;li class=\"badge\"&gt;\u00daltimas unidades&lt;\/li&gt;\n  &lt;li class=\"badge badge--danger\"&gt;-15%&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;ul class=\"card__badges card__badges--dos\"&gt;\n  &lt;li class=\"badge badge--accent\"&gt;Oferta instant\u00e1nea&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Con Grid defines dos \u00e1reas, <code>badges<\/code> y <code>badges-dos<\/code>, y cada grupo ocupa la suya. La imagen abarca todas las columnas con <code>grid-column: 1\/-1<\/code>. Si el espacio se acaba, las etiquetas saltan de l\u00ednea en vez de superponerse. Prueba a arrastrar la esquina de la tarjeta: tiene <code>resize: horizontal<\/code> justo para eso.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card{\n  resize: horizontal;\n}\n\n.card__media {\n  display: grid;\n  grid-template-areas: \"badges badges-dos\";\n}\n\n.card__media &gt; img {\n  grid-column: 1\/-1;\n  grid-row: 1\/-1;\n}\n\n.card__badges{\n  grid-area: badges;\n  padding: 12px;\n}\n\n.card__badges--dos{\n  grid-area: badges-dos;\n  justify-self: end;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Un hero con overlay: imagen, degradado y texto en la misma celda<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Un hero tiene tres capas: la imagen de fondo, un degradado que mejora la lectura y el texto. Es lo que muchos resuelven con tres <code>position: absolute<\/code>. Con Grid, la secci\u00f3n declara un \u00e1rea llamada <code>overlay<\/code> y los tres hijos se asignan a ella. El texto baja con <code>align-self: end<\/code>. Y como en el HTML va antes que la imagen y el degradado, estos lo tapar\u00edan: <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/Reference\/Properties\/order\" target=\"_blank\" rel=\"noopener\"><code>order: 3<\/code><\/a> lo pinta el \u00faltimo, encima de los dem\u00e1s. Es el equivalente a un <code>z-index<\/code>, pero solo compara los elementos de ese contenedor.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.hero {\n  display: grid;\n  grid-template-areas: \"overlay\";\n}\n\n.hero__shade {\n  background: linear-gradient(to top, #0F0F14 10%, #0F0F14B3 45%, #0F0F1433);\n}\n\n.hero__bg,\n.hero__shade, .hero__content{\n  grid-area: overlay;\n}\n\n.hero__content {\n  align-self: end;\n  order: 3;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Un popover que s\u00ed debe flotar: position absolute<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora al rev\u00e9s. Un bot\u00f3n \u00abReaccionar\u00bb abre una burbuja de emojis al pasar el rat\u00f3n. Aqu\u00ed <strong>s\u00ed<\/strong> quiero que la burbuja salga del flujo: no debe empujar nada ni ocupar espacio. El HTML usa el <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Global_attributes\/popover\" target=\"_blank\" rel=\"noopener\">atributo <code>popover<\/code><\/a>, que enlaza el bot\u00f3n con la burbuja (<code>popovertarget<\/code>) y la muestra en la capa superior del navegador (*top layer*). El CSS le da <code>position: absolute<\/code>, y el ejemplo a\u00f1ade un poco de JavaScript para abrirla al pasar el rat\u00f3n y calcular su <code>top<\/code> y <code>left<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;button class=\"react\" id=\"react\" popovertarget=\"picker\" aria-pressed=\"false\"&gt;\n  ...\n&lt;\/button&gt;\n\n&lt;article class=\"picker\" id=\"picker\" popover&gt;\n  ...\n&lt;\/article&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.picker {\n  position: absolute;            \/* \u2605 top y left los calcula el JS (sin anchor) *\/\n  inset: auto;\n  margin: 0;\n  padding: 0 0 12px;             \/* puente invisible para el hover *\/\n  color: inherit;\n  background: none;\n  border: 0;\n  overflow: visible;\n  translate: -50% -100%;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Un men\u00fa desplegable que cae debajo de la barra<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Otro cl\u00e1sico. La barra es la referencia (<code>position: relative<\/code>) y el panel se coloca con <code>top: calc(100% + 8px)<\/code>: justo debajo de ella, con 8 p\u00edxeles de aire. Con Grid tendr\u00edas que reservar una fila vac\u00eda y empujar el contenido de la p\u00e1gina, y un men\u00fa no debe empujar nada. Por eso aqu\u00ed gana <code>position: absolute<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.topbar {\n  position: relative;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.nav {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  z-index: 5;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Una notificaci\u00f3n pegada al borde de una foto<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00daltimo caso: un contador sobre el borde del c\u00edrculo de una foto de perfil. El elemento sobresale de su contenedor, y las celdas de Grid no est\u00e1n pensadas para sobresalir. Con <code>top<\/code>, <code>right<\/code> y un <code>translate<\/code> de 50 %, la notificaci\u00f3n queda justo en el borde a 45\u00b0. Podr\u00edas forzarlo con Grid, pero estar\u00edas reinventando la rueda.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.pet {\n  position: relative;            \/* \u2605 referencia para la notificaci\u00f3n *\/\n}\n\n.pet__badge {\n  position: absolute;\n  top: 14.6%;                    \/* \u2605 sobre el borde del c\u00edrculo, a 45\u00b0 *\/\n  right: 14.6%;\n  translate: 50% -50%;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-callout acg-callout--warn is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">Cuidado<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>position: absolute<\/code> no se lleva bien con el dise\u00f1o responsive: al sacar el elemento del flujo, el contenedor no reserva su espacio y cualquier cambio de ancho puede montar un elemento sobre otro. Si ves que tu dise\u00f1o se rompe al estrechar la ventana, empieza por buscar qu\u00e9 elementos est\u00e1n en posici\u00f3n absoluta.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-callout acg-callout--tip is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">Consejo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si no sabes cu\u00e1l usar, hazte una pregunta: <strong>\u00bfeste elemento debe ocupar sitio en su contenedor?<\/strong> Si la respuesta es s\u00ed (etiquetas, overlays, capas), usa Grid. Si debe flotar sin empujar a nadie (men\u00fas, tooltips, popovers), usa <code>position: absolute<\/code>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-cta acg-cta--sponsor is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-cta__eyebrow wp-block-paragraph\">Patrocinador oficial del curso<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Publica tus proyectos con Hostinger<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hostinger es el patrocinador oficial del curso. Si quieres publicar estos ejemplos en internet con tu propio dominio, entra con el enlace de AlexCG Design y aprovecha el descuento.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/hostinger.com\/alexcg\" rel=\"sponsored noopener\" target=\"_blank\">Obtener el descuento<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Preguntas frecuentes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bf<code>position: absolute<\/code> est\u00e1 obsoleto?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. Sigue siendo la herramienta correcta para men\u00fas desplegables, tooltips, popovers y elementos que sobresalen de su contenedor. Lo que conviene es dejar de usarlo para apilar elementos dentro de un mismo contenedor, donde Grid evita los solapamientos y mantiene el dise\u00f1o dentro del flujo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfPuedo superponer dos elementos con CSS Grid?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00ed. Asigna el mismo \u00e1rea (<code>grid-area<\/code>) a los dos elementos y se colocar\u00e1n en la misma celda, uno encima del otro. Con <code>align-self<\/code>, <code>justify-self<\/code> o <code>place-self<\/code> decides d\u00f3nde queda cada uno dentro de esa celda, y con <code>order<\/code> cu\u00e1l se pinta encima.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 es mejor para el responsive, Grid o position absolute?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Grid, en la mayor\u00eda de los casos. Los elementos en Grid siguen en el flujo, as\u00ed que el contenedor se adapta a su tama\u00f1o y las etiquetas saltan de l\u00ednea en vez de pisarse. Con <code>position: absolute<\/code>, t\u00fa calculas cada posici\u00f3n y cualquier cambio de ancho puede romper el dise\u00f1o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfSirve <code>order<\/code> en Grid para sustituir a <code>z-index<\/code>?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando varios elementos comparten la misma celda, s\u00ed: el de mayor <code>order<\/code> se pinta encima del resto. Es m\u00e1s sencillo que el <code>z-index<\/code> porque solo compara los elementos de ese contenedor. Para capas que viven fuera de \u00e9l, como un men\u00fa o un popover, sigues necesitando <code>z-index<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e1s proyectos<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/dropdown-css\/\">C\u00f3mo crear un dropdown men\u00fa con CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/3-caracteristicas-css\/\">3 caracter\u00edsticas que no conoc\u00edas de CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/como-crear-una-pagina-web-con-html-css-js\/\">C\u00f3mo crear una p\u00e1gina web con HTML, CSS y JavaScript<\/a><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group acg-cta is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-cta__eyebrow wp-block-paragraph\">Curso<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Domina CSS desde cero<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Estoy preparando un curso de CSS donde Grid, Flexbox y position se explican con proyectos reales.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/alexcgdesign.com\/cursocss\">Ver el curso<\/a><\/div>\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Compara CSS Grid y position absolute con ejemplos reales: etiquetas, hero, men\u00fas y popovers. Descubre cu\u00e1ndo usar cada uno y evita los solapamientos.<\/p>\n","protected":false},"author":1,"featured_media":3357,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acg_migrated":"2026-10-13","footnotes":""},"categories":[39,2],"tags":[],"class_list":["post-3356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutoriales","category-diseno-web"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=3356"}],"version-history":[{"count":0,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3356\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/3357"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=3356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=3356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=3356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}