Mission 6: Star Map Alignment
The star map is just a jumble of elements. Your first step is to define a proper 3x3 grid structure for the navigation chart.
Mission Objective
Step 1 / 2
System Briefing: The Grid Protocol
The flagship, Olympus Mons, requires a two-dimensional layout system for its main navigation chart. While Flexbox is great for one dimension, **CSS Grid** excels at creating complex, responsive grid layouts with rows and columns. It's the ultimate tool for organizing entire interfaces.
Activating the Grid
Similar to Flexbox, you start by declaring a grid container.
.grid-container {
display: grid;
}
Defining Columns and Rows
The core of CSS Grid is defining the structure of your tracks (columns and rows).
grid-template-columns: Defines the number and size of the columns.grid-template-rows: Defines the number and size of the rows.
/* Creates a 3-column grid with one fractional unit each */
grid-template-columns: 1fr 1fr 1fr;
/* Creates two rows, one 100px high, the other auto-sized */
grid-template-rows: 100px auto;
Placing Items
Once the grid is defined, you can explicitly place items onto it using line numbers. Grid lines are numbered starting from 1.
grid-column-start&grid-column-end: Defines which column line an item starts and ends on.grid-row-start&grid-row-end: Defines which row line an item starts and ends on.- Shorthand:
grid-column: start / end;andgrid-row: start / end;.
/* This item will span from column line 1 to column line 3 */
.item-a {
grid-column: 1 / 3;
}