Creating a 3 column layout. about atomic-layout

[ZombieChowder11]

Hey @kettanaito , that does solve the problem, thanks!

[kettanaito]

Hey, @ZombieChowder11. Thanks for asking this, I'll try to help.

First that catches my attention is that in your templateTablet string you have unequal number of areas and columns:

meta actions mex
text hex
/ auto auto auto auto

By specifying 4 columns (/auto auto auto auto) you need to make sure that your areas (meta, actions, text, hex) fill all those columns. This requirement comes from the CSS Grid spec, and the proper template may look like this:

meta actions mex .
text hex . .
/ auto auto auto auto

I've used a dot (.) as a placeholder area in the grid. This means that the associated row/column will not be taken by any areas.

However, from what you've described, using a placeholder isn't what you want. I believe the layout you want can be achieved by repeating the areas you wish to span between columns:

meta meta actions mex
text text text hex

In the template above the meta area takes 1 / span 3 columns, leaving actions and mex to follow in the 3rd and 4th columns respectively. The text area on the second row takes 1 / span 4 columns, with hex following in the remaining column.

Repeating an area in a grid-template-areas is an implicit way to specify its grid-column-start and grid-column-end (as well as similar properties for grid-row-*). This way you don't have to specify start/end explicitly, as well as auto auto ... for each column.

Here's a sandbox with the solution using the areas from the explanation above.

In case I didn't get the position properly, try to play around with the areas repetition, I'm sure you'll get it as you need. Let me know if this answers your question.

[kettanaito]

Happy to hear that!