Back to updates
Feature
Layout & design

Reuse grid layouts more easily with grid template areas

Define grid template areas to reuse grid layouts with ease — and make sweeping changes to recurring layouts in a fraction of the time.

Reuse grid layouts more easily with grid template areas

<p>Following up our <a href="<https://webflow.com/blog/css-grid-release-2-0>">recent 2.0 release</a> of CSS grid support, we’re expanding the power of grid even further with grid template areas: a new way to position items within a grid that makes reusing layouts 10 times easier.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1440px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1440px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c97cEgAVRsRCXhaT8LuejYKqWn9ybAkUUjJ6ncDXPXQOjfDlVS4Nt9T5kmWeTByMbfjBhweUnm5qIIA6ykqWt0lIW4-gNI0RoY5Ygc7alar2w8p2o0v7FJHa0aL7crVU0siOttUq.gif>" alt="Define grid template areas right on the canvas."></div><figcaption>Define grid template areas right on the canvas.<br></figcaption></figure><p>Along with other benefits, grid template areas allow you to restructure recurring layouts in a few clicks and impact every instance of that layout — without worrying about the content within it. In effect, this enables you to create something like content agnostic symbols.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1440px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1440px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c8f3eXSJnuVnZkE1z6zctu01d3dDOpfpz2lMRIv1mnTeTGmp6eEmVzVdlNboVeMSqcueRDztKJwxqEGP2EVnxYG7GNxGf3xWntasJYyVCghJOBIl2480bJ5bZPqCGQaqxa_yXW7r0a.gif>"></div><figcaption>Make sweeping changes to recurring layouts across your site in just a few clicks.<br></figcaption></figure><p>For a full look at the changes and new workflows this unlocks (and a bunch of cloneable layouts) check out our <a href="<https://webflow.com/blog/reuse-grid-layouts-more-easily-with-grid-template-areas>">release notes blog post</a>.</p>


Launched on
July 9, 2019
Category
Layout & design

Related updates

Truncate long content with text overflow

Truncate long content with text overflow

Learn more
Text Decoration Styles

Text Decoration Styles

Learn more
New variable types: Number and Percentage

New variable types: Number and Percentage

Learn more
Component style variants is now available

Component style variants is now available

Learn more
Manage variables at scale with reordering and bulk actions

Manage variables at scale with reordering and bulk actions

Learn more
Drop shadow filters

Drop shadow filters

Learn more