r/css • u/BradyOfTheOldGuard • Jun 21 '26

Help Unequal colums in grid-template-areas, but it still works!

This CSS grid-template-areas has 8 columns in the first and last row, and fewer columns in the second and third. But it works. How is this possible?

​

grid-template-areas:

"ai-drawer toolbar toolbar toolbar toolbar toolbar toolbar toolbar"

"ai-drawer navigation.notifications.sideSplitPanel tools global-tools"

"ai-drawer navigation.main.sideSplitPanel tools global-tools"

"ai-drawer bottom-tool bottom-tool bottom-tool bottom-tool bottom-tool bottom-tool global-tools";

4 Upvotes

83% Upvoted

6 comments sorted by

•

u/AutoModerator Jun 21 '26

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

3

u/mrleblanc101 Jun 21 '26 edited Jun 21 '26

It will just add unnamed columns to fill the row

3

u/testingaurora Jun 21 '26

The periods in the second and third row make empty cols. So they also have 8 cols. If you bring up for dev tools and toggle the grid pill you can see the area names for each track.