{ "@context": "https://schema.org", "@type": "Organization", "name": "Brainscape", "url": "https://www.brainscape.com/", "logo": "https://www.brainscape.com/pks/images/cms/public-views/shared/Brainscape-logo-c4e172b280b4616f7fda.svg", "sameAs": [ "https://www.facebook.com/Brainscape", "https://x.com/brainscape", "https://www.linkedin.com/company/brainscape", "https://www.instagram.com/brainscape/", "https://www.tiktok.com/@brainscapeu", "https://www.pinterest.com/brainscape/", "https://www.youtube.com/@BrainscapeNY" ], "contactPoint": { "@type": "ContactPoint", "telephone": "(929) 334-4005", "contactType": "customer service", "availableLanguage": ["English"] }, "founder": { "@type": "Person", "name": "Andrew Cohen" }, "description": "Brainscape’s spaced repetition system is proven to DOUBLE learning results! Find, make, and study flashcards online or in our mobile app. Serious learners only.", "address": { "@type": "PostalAddress", "streetAddress": "159 W 25th St, Ste 517", "addressLocality": "New York", "addressRegion": "NY", "postalCode": "10001", "addressCountry": "USA" } }

CSS: Grid Flashcards

(18 cards)

1
Q

What is CSS Grid?

A

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;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is the “fr” (fractional) unit?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

How do you create gaps between tracks in Grid?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is “grid-template-columns:”?

A

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

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is “grid-template-rows:”?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is “grid-autoflow:”?

A

The determines how auto placed items fit in the grid.

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is “grid-auto-columns:”?

A

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

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is “place-items”?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is “align-items”?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the “repeat()” function?

A

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);
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is Explicit Grid?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is Implicit Grid?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is the “minmax()” function?

A

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);
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is Line-Based Placement?

A

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;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is “grid-template-areas”?

A

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;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What are Dev Tools (Developer Tools)?

A

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.

17
Q

What are CSS Validators?

A

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.