Number and width of columns in CSS grids
We will begin our acquaintance with working in the grid by assigning the number and width of columns in which the child elements will be placed. For this purpose, we use the grid-template-columns property, which is specified in the parent element and sets the number and width of columns that the descendant elements will occupy in the grid. In the property value, we specify the width of the columns in pixels.
Example
Let's first create a parent element and make it a grid container. Let's say we have a div that contains four child elements. Let's set its display property to grid, and set the width for two columns in grid-template-columns:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 200px 400px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Example
Now let's create a table with four differently sized columns:
<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: 50px 100px 200px 250px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Practical tasks
Let's say you have a div with nine child elements. Make the parent element a grid container.
Place the child elements in two columns of width 200px.
Place the child elements in three columns of width 150px.
Place the child elements in three columns: the first is 100px wide, the second is 150px, and the third is 200px.
