Master WordPress Grid Layouts

Most great-looking websites utilize some sort of grid pattern in their page layout. But while many designers accomplish this using CSS Grid, new WordPress blocks let you do it right in the editor.
In today’s “Build and Beyond” video, Jamie Marsland shows you how to use Grid and Grid Layout blocks to create a beautiful, functional WordPress site.
Ready to get building on WordPress.com? wordpress.com/...
Need more help? Please visit wordpress.com/...
ABOUT WORDPRESS.COM
With more than 15 years powering the open web, we’re here to support your WordPress.com journey: your successes, your learning experiences, and your fabulous ideas. Wherever you are on your path, we’ve got you covered.
#WordPress #wordpresstutorial #createawebsite

[@goatcheeta]

I thought I had seen that basic layout - Kevin Powell is one I try to digest every week. What a gift to all of us! Thanks for all the work you have done in making Gutenberg real and useful for the rest of us. You were the first to publicize CSS Grid in 6.5

[@jamiewp]

Thank you 🙏

[@kaysha]

Jamie, you're the best

[@jamiewp]

Thank you 🙏

[@hitmaninblood]

Really love watching your videos Jamie - please continue 👏🏻🥳

[@wordpressdotcom]

More to come!

[@taunado]

Thanks. It'll great to see more dynamic content, such as pulling in your posts to populate the grid content and rendering styles from a style guide.

[@ArambhAcademy.]

Thanks. you add imp techniques and information in my knowledge.

[@paulroos8517]

Thanks for sharing. Here is a lot to learn.

[@tim78723]

always Brilliant Jamie. How did I miss this last week? What a great use case for using Gutenberg. Thanks.

[@jamiewp]

Super tks Tim 🙏

[@CasualRelief]

Is the Grid Block going to hit WordPress Core?

[@jamiewp]

Yup 👍

[@jzajzz]

@@jamiewp there are no responsive Settings in WP core? am I reading taht correctly .. i'm not seeing these options. I'd like to have a 3 column grid stack on mobile.

[@chrislanejones]

This is great, thanks for sharing!

[@jamiewp]

Thanks for watching Chris, glad it was helpful 👍

[@spitsparrow]

I dont get the options to select a width for the grid block. Any clues as to why some and some dont get to see it? is it a theme thing. You have spectra i think im just on 2024

[@erling5148]

which blocks editor did you use there is no naming of it

[@wordpressdotcom]

It's the default editor on WordPress.com :)

[@the-khutinati-tech]

Thank You

[@pshemekm]

Thanks for presentation; grid is so powerful! However, in the real world, we have to do such things with dynamic outputs like query loops. So still with CSS (nth-child)

[@jamiewp]

Did you know the query loop block supports CSS grid?

[@pshemekm]

@jamiewp Yes, however it does not provide as powerful controls as the Grid block does. So we have to rely on CSS if we want something more.

[@jamiewp]

@@pshemekm yup 👍

[@mikeryan2802]

Nice.

[@KariposTheOne]

Couldn't you develop a better CSS grid builder, like the one from Cwicly? It looks like WP is putting in no effort.

[@tuulistewart5875]

Very cool!! Thanks
Note: The option "align grid wide" comes with creator package, not with the lower ones. When I tried it on Creator plan, it still doesn't give me wide option = just 3 columns t play with & not those rounded corners and all. Investigating further (tried on three different sites, different underling themes and WP plans) - not all, just some themes give those opportunities.
Just saying...

[@wordpressdotcom]

Hey there! The block alignment functionality is available on all WordPress.com plans. If you have any issues setting up a page or post, feel free to reach out! wordpress.com/help