.wrapper { display: grid; grid-template-columns: [full-start] 1fr [wrapper-start] minmax(0, 70rem) [wrapper-end] 1fr [full-end]; /* Optional gap */ column-gap: var(--pad, 1rem); } .wrapper > * { grid-column: wrapper; } .wrapper > .full-width { grid-column: full; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter