Grid layouts
CSS Grid, the Bootstrap 12-column grid, and a two-page menu built with Grid. Everything here is live: drag the sliders, resize the window.
Sklyarenko Vlad
CSS Grid Layout Module
A popular way to style a page is an HTML grid. You set the column widths and the gaps between columns and rows. When a width is auto, that column fills the rest of the page.
Playground
Same CSS as above. Change the numbers and the preset, and the code underneath rewrites itself.
On a narrow phone the first preset (250px + 250px + auto) is wider than the screen, so swipe sideways inside the green box. That is exactly why fixed pixel columns are not responsive. Try 1fr 1fr 1fr or auto-fit.
12 columns, col-x
Bootstrap splits a page into 12 columns. An element takes as many as you ask for with the class col-x, where x is from 1 to 12.
Span builder
Drag the slider. The two columns always add up to 12: 2 + 10 = 12.
The lecture's example uses col-sm-2 + col-sm-10 inside a container-fluid. The live demo here uses plain col-x, so the two columns stay side by side even on a phone.
This page does not load Bootstrap. It implements the same container, row and col-* classes in about 30 lines of CSS (see proj.css), so the page stays light and keeps its own look. On a real project you just add the link above.
container, container-fluid, col-sm
Three layouts from the lecture. Pick one, then resize the window.
Always three columns, because col-4 has no breakpoint. The container has a fixed maximum width and is centered.
Three columns from 576px up, one column below. The container-fluid always takes the full width.
Container width simulator
Imagine the browser window at different widths. container-fluid follows the window; container jumps between fixed widths at the breakpoints 576, 768, 992 and 1200px.
A menu built with CSS Grid
The task: using CSS Grid, create a menu that points to two pages, Front End and Back End, and keep the files together in one folder. Here it is. Click a link: it opens the real page.
The code
The files
In the lecture the folder holds index.htm, Front.htm and Back.htm. On this site the same three roles are played by:
- project-1.html the menu (this page)
- project-1-front.html Front End
- project-1-back.html Back End