Auto in CSS grid

HTML & CSS
1

what does auto do for me in CSS grid?

grid-template columns: auto
grid-template-rows: auto
minmax: auto

say grid-template-rows: auto auto auto

anywhere else i cant think of where i can use auto

please pass on some simple samples auto code with comments so i can learn

thank you

2

I would prefer if you constructed a code pen with those properties above and test for yourself what happens.

Add more children to the grid with some dummy content and see the result. Then remove the css rules for the column and rows and see what the difference is.

In that way you will learn more thoroughly than me just saying no that’s wrong?

It’s only by repeated testing and experimenting that you can get a feel for what’s happening.

You really only need to define the columns and rows when you have a set layout to achieve (like a header, footer and 3 columns). If you want auto columns and rows you don’t really need to define them.

Note your minmax rule is incorrect and you can easily look up the correct format. :slight_smile:

3

yes, i can look up my own solutions :slight_smile:

thanks, Paul

BTW

progress! i have been worknig on span, autoflow and fr units

more my speed!

1 Like
4

ok, i have been playing with my code

please see https://codepen.io/Pavel_NA/pen/YzjJLwB

grid-template-columns:auto 200px 200px;

why is the 1st column so wide on the auto?

now auto here will provide just enough space to fill the width

i dont understand when i add

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr;
    grid-gap: 30px;
}

what is auto doing for me?

i coded the auto grid-template-row, but saw no diference

help, please :slight_smile:

thank you

5

Isn’t that obvious?:).

The auto column will be all the remaining width after the other 2 columns of 200px have been placed. If the page is 2000px wide then the auto column will be 1600px (barring any gaps).

There is no difference because there is no need for auto here or the 1fr. They would only work if there was a fixed height to the grid.

6

In that second example you have not specified auto for a column :slight_smile:

Note that you still have made the mistake of using height (even in demos).

This is what I see on my phone.

image
image750Ă—1334 145 KB

Had you used min-height instead the box would have grown to accommodate the text. :slight_smile:

7

AH HA! got it!

here i have learned something new :slight_smile:

i need to play with this one to fully get it

BINGO!

pleas see Auto in CSS grid - #6 by PaulOB

thanks!

8

sorry!
meant this

9

Yes the auto rules for the rows aren’t really needed but would suggest that you only have 4 items. 2 rows of 2.

If you have an unknown number of rows then you don’t need to specify the rows.

You have to think in terms of whether this grid is a layout or whether it is a grid of unknown size.

When you use grid for the whole page layout you probably just have a header, sidebar, main section and footer. You are not then going to repeat all those by adding another footer or header etc. You have say 4 or 5 areas that are explicitly defined. All your content goes in those defined areas.

10

ok

will digest :slight_smile:

thanks again! and thanks for your patience!

1 Like