CSS3 Grids

Aug 30 2018

I have been working on another website that uses some of the "modern" web development techniques. For example, I've implemented parallax scrolling, auto-scrolling, minimalist design, hero image and a colour scheme. I would like to do a cinemagraph eventually, but for now it's not necessary.

Initially I wanted to use bootstrap in order to make it look good on smaller screens e.g phones and I started the project with this framework. However, at the same time I was reading up more on core technologies and the CSS3 grid (which basically does the same stuff as the bootstrap portion I wanted to use). I decided to start the project again and implement CSS grid instead. There are a couple of points/examples I want to make for future reference.

CSS Grids:
In your wrapper or container divs, select the following CSS properties:
.wrapper { display: grid; grid-template-columns: 70% 30%; grid-gap: 1em;}

This will create two columns that will take up the whole page automatically. One column will take up 30% of the page, the other 70%. Grid-gap creates a margin between both the columns and rows.
Grid-template-columns also takes fractions (use these).
.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; OR repeat(3, 1fr);
; grid-gap: 1em;}
This gives 3 equal columns that adjust to screen size automatically.

For height:
Can use grid-auto-rows: 100px; OR grid-auto-rows: minmax(100px, auto).
This will stretch to fill content if needed.

Nested grids work just as you'd expect.
You can grow the grid boxes using grid-column: 1/3; grid-row: 1/3;
The 1/3 will set the column or row to start from row/column 1 and span until row/column 3 (three was used just as an example since we created 3 columns using 1fr earlier).
Thus using this you can create all kinds of grid patterns and even overlapping.

The main issues I had involved making sure I was calling the correct div in my css style file. I learned that it was easier to be more specific by calling multiple id's e.g #section-b #pic {...}.

The project is almost done but I won't post it yet.