HSilvia

My Grid

I have set this page up with a CSS grid. For mobiles, it is made with four rows and one column. For larger devices, the grid changes into three rows and two columns. The way I did this, was I turned the body into a grid, then I used grid-template and grid-template-areas to divide the page up. I also set the min-height to the viewport’s height so that even if there’s not a lot of content, the footer will stick to the bottom of the page. This is another way to do a sticky footer.

Mobile:

body {
	display: grid;
	grid-template: auto 1fr auto 60px / 100vw;
	grid-template-areas:
		"header"
		"main"
		"side"
		"footer";
	min-height: 100vh;
}

After the second break point:

body {
	grid-template: auto 1fr 60px / 1fr 300px;
	grid-template-areas:
		"header header"
		"main side"
		"footer footer";
}

After I set up the grid though, I have to assign what tags or ids should be assigned what grid area. You do this with the grid-area property.

Example:

aside {
	grid-area: side;
}

CSS Variables

Variables are a helpful tool to control layouts and color schemes. They let your declare variables that can be reused throughout your code. So when you want to switch out a color or the size of something, you just change the value of the variable rather than trying to find all the instances in the code. To use variables, you have to declare your variables at the start of your CSS with :root. Then when you want to use a variable, you use the var() function and put the variable name in the parenthesis. Remember, variable names need to start with a double dash.

Example:

:root {
	--dkgry: #595959;
	--mdgry: #E5E5E5;
	--accblu: #82E3FB;
}

body {
	margin: 0;
	background: var(--mdgry);
	font-family: aglet-sans, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.75rem;
	color: var(--dkgry);
}

You can read more about how to use variables at the following resources:

• W3 Schools: CSS Variables - The var() Function
• MDN Web Docs: Using CSS custom properties (variables)