CSS: Grid

Question 1

What is CSS Grid?

Answer 1

CSS Grid is a two-dimensional layout system used to create complex layouts in web pages. Grids will have rows and columns with gaps between them. To define a grid layout, you would set the display property to grid.

.container {
display: grid;
}

Question 2

What is the “fr” (fractional) unit?

Answer 2

This unit represents a fraction of the space within the grid container. You can use the fr unit to create flexible grids.

Question 3

How do you create gaps between tracks in Grid?

Answer 3

There are three ways to create gaps between tracks in CSS grid. You can use the column-gap property to create gaps between columns. You can use the row-gap property to create gaps between rows. Or you can use the gap shorthand property to create gaps between both rows and columns.

Question 4

What is “grid-template-columns:”?

Answer 4

This is used to set lines names and sizing for the grid track columns.

.container {
display: grid;
width: 100%;
grid-template-columns: 30px 1fr;
}

Question 5

What is “grid-template-rows:”?

Answer 5

This is used to set lines names and sizing for the grid track rows.

Question 6

What is “grid-autoflow:”?

Answer 6

The determines how auto placed items fit in the grid.

.container {
display: grid;
width: 100%;
grid-auto-flow: column;
}

Question 7

What is “grid-auto-columns:”?

Answer 7

This is used to set the size for columns created implicitly.

.container {
display: grid;
width: 100%;
grid-auto-columns: auto;
}

Question 8

What is “place-items”?

Answer 8

This is used to align items for both block and inline directions.

Question 9

What is “align-items”?

Answer 9

This is used to set the alignment for the items in a grid container.

Question 10

What is the “repeat()” function?

Answer 10

This function is used to repeat sections in the track listing. Instead of writing grid-template-columns: 1fr 1fr 1fr; you can use the repeat() function instead.

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

Question 11

What is Explicit Grid?

Answer 11

You can specify the number of lines or tracks using the grid-template-columns or grid-template-rows properties.

Question 12

What is Implicit Grid?

Answer 12

When items are placed outside of the grid, then rows and columns are automatically created for those outside elements.

Question 13

What is the “minmax()” function?

Answer 13

This function is used to set the minimum and maximum sizes for a track.

.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(150px, auto);
}

Question 14

What is Line-Based Placement?

Answer 14

All grids have lines. To specify where the item begins on a line, you can use the grid-column-start and grid-row-start properties. To specify where the item ends on the line, you can use the grid-column-end and grid-row-end properties. You can also choose to use the grid-column or grid-row shorthand properties instead.
Here is an example of using the grid-column property to make an element stretch across all columns.

.element {
grid-column: 1 / -1;
}

Question 15

What is “grid-template-areas”?

Answer 15

The property is used to provide a name for the items you are going to position on the grid.

<div>
<div>Header</div>
<div>Sidebar</div>
<div>Main Content</div>
<div>Footer</div>
</div>

.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
“header header”
“sidebar main”
“footer footer”;
gap: 20px;
}

.header {
grid-area: header;
background-color: #4CAF50;
padding: 10px;
color: white;
}

.sidebar {
grid-area: sidebar;
background-color: #f4f4f4;
padding: 10px;
}

.main {
grid-area: main;
background-color: #e0e0e0;
padding: 10px;
}

.footer {
grid-area: footer;
background-color: #4CAF50;
padding: 10px;
color: white;
}

Question 16

What are Dev Tools (Developer Tools)?

Answer 16

DevTools allow you to inspect and modify your CSS in real-time. The Styles pane shows all the CSS rules applied to the selected element, including inherited styles. You can toggle individual properties on and off, edit values, and even add new rules directly in the browser. This immediate feedback is incredibly useful for experimenting with different styles without modifying your source code.

Question 17

What are CSS Validators?

Answer 17

Validators are used to check your CSS against the official specifications and reports any errors or warnings. A popular validator you can use is the W3C CSS Validator.