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.

<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>