curriculum/challenges/english/blocks/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md
Implicit grid refers to the rows and columns automatically created by the browser when placing items in a grid layout – those not explicitly defined using grid-template-rows or grid-template-columns.
The properties that control the columns and rows created implicitly by the browser are grid-auto-columns and grid-auto-rows.
Implicit grid also refers to the additional rows and columns the browser automatically generates when you place an item outside the explicitly defined rows and columns.
For instance, let's say you define only two explicit columns in a grid layout this way:
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 100px 100px; /* Only 2 explicit columns */
}
.grid-item {
background-color: burlywood;
border: 1px solid orangered;
padding: 0.5rem;
margin: 0.5rem;
}
:::
Two items filled the first row using the two explicit columns – Item 1 in the first column and Item 2 in the second column.
The next items start a new row with Item 3 going in the first column of the second row and Item 4 in the second column of the second row, and so on.
As you've already seen, explicit grids are the areas of the grid you intentionally set up. That is, the rows and columns you explicitly define for a grid layout using the grid-template-rows and grid-template-columns properties.
Here is a table summarizing the differences between implicit and explicit grids:
| Feature | Explicit Grid | Implicit Grid |
|---|---|---|
| Size control | Fully customizable using grid-template-rows and grid-template-columns . | Controlled by grid-auto-rows and grid-auto-columns , or defaults to auto . |
| Default Behavior | Does not change unless explicitly defined. | Automatically adapts to items placed outside the explicit grid. |
| Complexity | Requires more planning for layout structure. | Easier to implement for unstructured or variable content. |
| Flexibility | Rigid structure with defined rows and columns. | Flexible and adapts to dynamically placed content. |
| Performance | Potentially more performant as the layout is predefined. | May require additional browser computations for implicit grid generation. |
| Use case | Useful when the grid structure is predictable and defined upfront. | Useful for dynamic layouts where content is unknown or changes frequently. |
Which properties control the columns and rows created implicitly by the browser in a CSS grid layout?
cols and rows
Think about properties that define implicit grid tracks.
col and row
Think about properties that define implicit grid tracks.
implicit-columns and implicit-rows
Think about properties that define implicit grid tracks.
grid-auto-columns and grid-auto-rows
4
Which properties are used to define explicit rows and columns in a CSS grid layout?
row and fr
Review the beginning of the lesson where this was discussed.
grid-explicit-rows and grid-explicit-columns
Review the beginning of the lesson where this was discussed.
grid-template-rows and grid-template-columns
grid-gap and grid-flow
Review the beginning of the lesson where this was discussed.
3
Which of the following code examples is the correct way to set two explicit columns?
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
}
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
}
Pay close attention to the property name and correct number of values in the examples.
.grid-container {
display: grid;
grid-template-rows: 100px 100px;
}
Pay close attention to the property name and correct number of values in the examples.
.grid-container {
display: grid;
grid-column-start: 100px 100px;
}
Pay close attention to the property name and correct number of values in the examples.
1