A QUICK AND DIRTY BENTO/GRID TUTORIAL

Set-up

Set-up is probably the most important part. Start by making a div with class="bentocontainer". Or whatever will help you remember that it's the full scope of the "bento box".

(i forgot to tell you to draw your ideal grid first lol)

Anyway make all the inner containers you need, and give them unique classes you'll remember. Then set style to grid-area:[class]Style or [class]-style or whatever works for you!

Inspect the HTML to see all my divs

Bento Creation

Copy this:

.bentocontainer{

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: auto;

grid-template-areas:

"pinkstyle pinkstyle pinkstyle"

"yellowstyle bluestyle greenstyle"

"tanstyle tanstyle orangestyle" }

you can replace with your own styles now

Ok now I'll tell you what each part means:

First line lets you style your full bento box
"Display:grid;" prepares bento organization
Auto columns uses the values you give it (1fr to make it responsive) and makes the columns that wide. The number of values is the number of invisible columns, so I used repeat() to make 3 columns, and used fr to make it use proportions instead of pixels.

Code Explained

Auto rows lets the computer do its thing and change the height of the rows as needed. I used auto so it adjusts to how much content there is. Both grid template and grid auto are what makes your bento box responsive to different screen sizes.
Template areas is the proportions. Visualize or look at your bento box plan. Cut it into columns and rows. Take that grid, and type how many grid-boxes each compartment will take up, from left to right, top to bottom. Essentially, write the grid proportions as text with quotation marks around each line.
Grid-area tags the boxes for composition.

After this you will probably have to add padding or margins to your text. You can also add a gap or border.

If you want a gap it needs to go in your bento container!!!

THAT'S IT YAYYYY OK HERE ARE MY SOURCES TEEHEE: "CSS Grid Course-The Only Grid Tutorial You'll Ever Need by Coding2GO", my beautiful mind, and developer.mozilla.org.

P.S. the unique classes are so you can style them individually as well. I used background-color and border.

A certified Medjed post -⁠ᄒ⁠ᴥ⁠ᄒ⁠-