The value of auto in CSS grids

In grid, when specifying the sizes of rows and columns, you can use the value auto. In this case, the blocks will simply fill all the free space available to them minus the width specified in pixels. Let's look at some examples.

Let's give the first and third columns a fixed width in pixels, and let the second column automatically take up the remaining space:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Place the child elements in two columns: the first one is 200px wide, and let the second one take up the remaining space.

Place the child elements in three columns: the first one is 100px wide, the second one is 150px wide, and the third one takes up the remaining space.