--- title: "How to Create Grid Container in WordPress?" url: https://nexterwp.com/docs/create-grid-container-in-wordpress/ date: 2025-06-23 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "A row of cards that has to stay aligned down as well as across is awkward to build with columns alone, because each column only knows about itself. A grid..." word_count: 503 --- # How to Create Grid Container in WordPress? ## Key Takeaways - Nexter Blocks usa un contenedor como cuadrícula cuando se cambia su diseño a grid, se define el número de columnas y se ajusta el espacio entre elementos. - La cuadrícula coloca los elementos en orden y hace que cada fila tenga la altura del elemento más alto, sin exigir alturas coincidentes entre contenedores hijos. - Nexter Blocks recomienda bajar el recuento de columnas para tablet y teléfono, porque tres tarjetas estrechas a 375px resultan ilegibles y una cuadrícula no se desplaza horizontalmente. A row of cards that has to stay aligned down as well as across is awkward to build with columns alone, because each column only knows about itself. A grid container lays the whole section out on a shared set of tracks, so every item lines up both ways. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-container/) ## Before You Start - **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Container, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Container** block on your page — see the [Container block guide](https://nexterwp.com/docs/add-a-container-in-wordpress/). ## Steps - Select your **Container** and set its layout to **grid**. - Set the number of **columns** the grid should have. - Set the **gap** between items. - Add one **container** inside for each grid item, and put your content in those. - Set a smaller column count for tablet and phone, then publish. ## How It Behaves The grid is a class on the parent container; the items are ordinary containers that the grid places. - **Measured on a published page:** a container set to grid rendered `tpgb-grid` on the wrapper, and each of the three child containers rendered `tpgb-container-inline` inside `tpgb-cont-in`.- **The children do not need matching heights.** The grid gives every item in a row the same height, which is the thing that is awkward to arrange by hand.- **Columns are per breakpoint.** Three across on desktop and one on a phone is the usual setting, and it does not require a second section.- **Anything can be a grid item** — each child is a full container, so it keeps its own padding, background and layout.- Measured with Nexter Blocks Pro deactivated: the container itself still renders. It is a free block. ## Limitations - **Items are placed in order.** Rearranging visually means rearranging the blocks, or using the start and end controls on an individual item.- **Too many columns on a phone is the commonest mistake.** Three narrow cards side by side are unreadable at 375px — drop to one.- **A grid does not scroll sideways.** If the content genuinely does not fit, a carousel is the better tool.- **Deep nesting gets confusing quickly.** A grid of grids is usually a sign the section wants splitting in two. ## Troubleshooting ### My items are stacked instead of side by side Either the layout is still flex in column direction, or the column count at the width you are viewing is one. Check the setting at that breakpoint. ### The gaps are uneven Padding on the individual items is adding to the grid gap. Set the gap on the parent and leave the items' own margins alone. ### One item is much taller than the rest That is the grid doing its job — the row takes the height of its tallest item. Trim the content or let the item span its own row. ### It looks wrong on mobile Set the column count for tablet and phone explicitly. Without that, the desktop count is inherited all the way down. ## Related Docs - [Add a container in WordPress](https://nexterwp.com/docs/add-a-container-in-wordpress/)- [Make a clickable container in WordPress](https://nexterwp.com/docs/make-a-clickable-container-in-wordpress/)- [Make a sticky container in WordPress](https://nexterwp.com/docs/make-a-sticky-container-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before creating a grid container in WordPress?** A: A grid container in Nexter Blocks starts with the Container block, and it works in the free edition as well as Nexter Blocks Pro. The page also says the block must be enabled under Nexter > Blocks in your WordPress dashboard. That matters because the grid is built on a parent container, not a separate layout system, so you need the base container block in place first. The [Container block guide](https://nexterwp.com/docs/add-a-container-in-wordpress/) covers the container setup. **Q: Why are my grid items stacked instead of sitting side by side?** A: That usually means the layout is still flex in column direction, or the column count at that breakpoint is set to one. The grid only lays items across when the parent container is actually set to grid and the current screen width has more than one column configured. This is why a desktop layout can look fine while tablet or phone collapses into a single stack. **Q: How many columns should I use for a responsive grid container?** A: Three across on desktop and one on a phone is the usual setting called out on the page. Columns are per breakpoint, so tablet and phone need their own counts instead of inheriting the desktop value all the way down. That keeps cards readable at smaller widths and avoids squeezing three narrow items into 375px, which the page flags as a common mistake. **Q: Can each item in a WordPress grid container have its own padding and background?** A: Each grid item is an ordinary container, so it keeps its own padding, background, and layout. That is useful when every card needs its own styling without breaking alignment across the row. Nexter Blocks places those child containers on shared tracks, but each child still behaves like a full container rather than a stripped-down cell. **Q: Why do all items in a grid row end up the same height?** A: That is how the grid behaves: it gives every item in a row the height of the tallest item. The page calls this out as one of the main reasons to use a grid instead of building cards by hand with columns. If one card has much more content, either trim it or let that item span its own row so the whole section does not feel uneven. **Q: What is better than a grid container when content does not fit on mobile?** A: A carousel is the better tool when the content genuinely does not fit, because a grid does not scroll sideways. The page also warns that too many columns on a phone make cards unreadable at 375px, so dropping to one column is usually safer than trying to force everything into one row. For deeper layouts, splitting the section is often cleaner than nesting grids inside grids.