Lecture 10 Layout

Topics for today

Positioning
Floats
One-dimensional layout (Flexbox, Multi-col)
Grid Systems

Positioning

The Box Model

There are a few properties that are crucial to how these boxes are sized:

padding controls the spacing from the element’s content to its edge. margin specifies the spacing from the element’s edge to the elements around it, and can be negative to bring the element closer to other elements instead of farther. border allows you to specify a visible border. It’s placed outside the padding.
Padding & border widths are added to width and height, not subtracted from it.
Outlines, shadows etc do not affect the box in any way.
Always use sufficient padding, otherwise the text is uncomfortable to read. As you may remember from the Graphic Design lecture, you usually need more padding horizontally than vertically.

Block elements

Laid out top to bottom*
Line break before and after
Box as wide as all available space
Box as tall as all contents (wrapped)
Text wrapping inside box
We can set width, height, margin

Lorem Ipsum dolor sit amet

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline elements

Laid out left to right*
Inline with surrounding text
Box as wide as all contents
Box as tall as one line
Text wrapping by box fragmentation
width, height, margin have no effect.

velit esse cillum dolore

consectetur adipiscing elit

sed do eiusmod tempor incididunt

Excepteur sint occaecat cupidatat non proident

Inline-block elements

Laid out top to bottom*
Line break before and after
Box as wide as all available space
Box as tall as all contents (wrapped)
Text wrapping inside box
We can set width, height, margin-top, margin-bottom

Laid out left to right*
Inline with surrounding text
Box as wide as all contents
Box as tall as one line
Text wrapping by box fragmentation
width, height, margin-top, margin-bottom have no effect.

velit esse cillum dolore

Lorem Ipsum dolor sit amet

consectetur adipiscing elit

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

sed do eiusmod tempor incididunt

Excepteur sint occaecat cupidatat non proident

Replaced elements

Theory: An element whose representation is outside the scope of CSS
Practice: flows around surrounding content like an inline-block, contents are not affected by the current document's styles
Only replaced elements can have intrinsic dimensions or an intrinsic aspect ratio (but not all do).

How do we break out of the flow and lay elements over others?

<main>
				<p>Cat ipsum dolor sit amet, bite the neighbor's bratty kid love you, then bite you or need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Run outside as soon as door open.</p>
				<section class="highlighted">
					<p>Sit on the laptop i will be pet i will be pet and then i will hiss, refuse to drink water except out of someone's glass or cough furball for run up and down stairs cats go for world domination suddenly go on wild-eyed crazy rampage.</p>
				</section>
				<p>Rub against owner because nose is wet dream about hunting birds climb a tree, wait for a fireman jump to fireman then scratch his face. You are a captive audience while sitting on the toilet, pet me i vomit in the bed in the middle of the night for sleep all day whilst slave is at work, play all night whilst slave is sleeping stretch, yet find a way to fit in tiny box. </p>
				<p>Munch, munch, chomp, chomp. Peer out window, chatter at birds, lure them to mouth then cats take over the world eat the fat cats food. Man running from cops stops to pet cats, goes to jail intently stare at the same spot, friends are not food or litter kitter kitty litty little kitten big roar roar feed me fish i must find my red catnip fishy fish sit in box eat fish on floor.</p>
				<p>Demand to have some of whatever the human is cooking, then sniff the offering and walk away kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff play riveting piece on synthesizer keyboard.</p>
				<p>Sleep in the bathroom sink sit on the laptop so nyan fluffness ahh cucumber! play time, and scratch the furniture for run at 3am soft kitty warm kitty little ball of furr. Purr while eating get video posted to internet for chasing red dot.</p>
				<p>Purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table man running from cops stops to pet cats, goes to jail, and jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Licks paws being gorgeous with belly side up hiiiiiiiiii feed me now yet slap kitten brother with paw jump around on couch, meow constantly until given food, so catching very fast laser pointer.</p>
				<p>I like fish Gate keepers of hell for mice, for leave buried treasure in the sandbox for the toddlers pet my belly, you know you want to; seize the hand and shred it! for meow meow mama. Hunt anything that moves throwup on your pillow, so have my breakfast spaghetti yarn yet cat cat moo moo lick ears lick paws or cats are a queer kind of folk sit in a box for hours. Loves cheeseburgers suddenly go on wild-eyed crazy rampage cough.</p>
				<p>Loved it, hated it, loved it, hated it trip on catnip, purr while eating jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water kitty run to human with blood on mouth from frenzied attack on poor innocent mouse, don't i look cute? mark territory, but run at 3am.</p>
			</main>

Notes

Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place regardless of scrolling.
The position property controls which positioning scheme is used. Its initial value is static, which corresponds to the default document flow.
What do you notice when position: absolute is applied?
To control the element offsets, we use the top, right, bottom, left properties.
These are relative to the element’s containing block. By default, this is the initial containing block, a rectangle with the same dimensions as the viewport, anchored to the top of the document.

Terminology
Positioned element is any element with `position` != `static`

TakeawayUse the offset properties to control the placement of positioned elements

inset
- top
- right
- bottom
- left

TakeawayA relatively positioned element still occupies the same space but can be moved with offset properties

Takeawayposition: absolute takes elements out of normal flow and places them over everything else

TakeawayAny positioned element is a containing block of any positioned descendants
= that's where top, right, bottom, left count from

Notes

Read more about the containing block on MDN

<section class="newsletter">
				<form>
					<label>
						Sign up for our <del>evil</del> <ins>amazing</ins> newsletter:
						<input type="email">
					</label>

<footer>
						<button class="primary">Yes, yes, yes!</button>
						<button>No, I'm dumb</button>
					</footer>
				</form>
			</section>
			<p>Cat ipsum dolor sit amet, bite the neighbor's bratty kid love you, then bite you or need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Run outside as soon as door open.</p>
			<p>Rub against owner because nose is wet dream about hunting birds climb a tree, wait for a fireman jump to fireman then scratch his face. You are a captive audience while sitting on the toilet, pet me i vomit in the bed in the middle of the night for sleep all day whilst slave is at work, play all night whilst slave is sleeping stretch, yet find a way to fit in tiny box. </p>
			<p>Munch, munch, chomp, chomp. Peer out window, chatter at birds, lure them to mouth then cats take over the world eat the fat cats food. Man running from cops stops to pet cats, goes to jail intently stare at the same spot, friends are not food or litter kitter kitty litty little kitten big roar roar feed me fish i must find my red catnip fishy fish sit in box eat fish on floor.</p>
			<p>Demand to have some of whatever the human is cooking, then sniff the offering and walk away kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff play riveting piece on synthesizer keyboard.</p>
			<p>Sleep in the bathroom sink sit on the laptop so nyan fluffness ahh cucumber! play time, and scratch the furniture for run at 3am soft kitty warm kitty little ball of furr. Purr while eating get video posted to internet for chasing red dot.</p>
			<p>Purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table man running from cops stops to pet cats, goes to jail, and jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Licks paws being gorgeous with belly side up hiiiiiiiiii feed me now yet slap kitten brother with paw jump around on couch, meow constantly until given food, so catching very fast laser pointer.</p>
			<p>I like fish Gate keepers of hell for mice, for leave buried treasure in the sandbox for the toddlers pet my belly, you know you want to; seize the hand and shred it! for meow meow mama. Hunt anything that moves throwup on your pillow, so have my breakfast spaghetti yarn yet cat cat moo moo lick ears lick paws or cats are a queer kind of folk sit in a box for hours. Loves cheeseburgers suddenly go on wild-eyed crazy rampage cough.</p>
			<p>Loved it, hated it, loved it, hated it trip on catnip, purr while eating jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water kitty run to human with blood on mouth from frenzied attack on poor innocent mouse, don't i look cute? mark territory, but run at 3am.</p>

Notes

Can we center the absolutely positioned dialog in the viewport? Let's try top: 50%; left: 50%;. What happens?
z-index controls which element is on top of what. Its initial value is auto which corresponds to source order.
Note that when we scroll the notice moves. What if we want it to stay in the same place?
position: fixed to the rescue! It's just like absolute but the containing block is the viewport. This has the effect of the element staying in the same place during scrolling.

Takeawayposition: fixed allows us to position elements in the same place regardless of scrolling

<p>hiiiiiiiiii feed me now or leave fur on owners clothes eat the rubberband the cat was chasing the mouse. I love cuddles hide head under blanket so no one can see yet meow to be let in yet love me! but the dog smells bad.</p>
			<p>Cat ipsum dolor sit amet, bite the neighbor's bratty kid love you, then bite you or need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Run outside as soon as door open.</p>
			<p>Rub against owner because nose is wet dream about hunting birds climb a tree, wait for a fireman jump to fireman then scratch his face. You are a captive audience while sitting on the toilet, pet me i vomit in the bed in the middle of the night for sleep all day whilst slave is at work, play all night whilst slave is sleeping stretch, yet find a way to fit in tiny box. </p>
			<p>Munch, munch, chomp, chomp. Peer out window, chatter at birds, lure them to mouth then cats take over the world eat the fat cats food. Man running from cops stops to pet cats, goes to jail intently stare at the same spot, friends are not food or litter kitter kitty litty little kitten big roar roar feed me fish i must find my red catnip fishy fish sit in box eat fish on floor.</p>
			<table>
				<thead>
					<tr>
						<th>Name</th>
						<th>Role</th>
						<th>MIT Email</th>
						<th>Office</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>David Karger</td>
						<td>Instructor</td>
						<td>karger</td>
						<td>32G-592</td>
					</tr>
					<tr>
						<td>Lea Verou</td>
						<td>Instructor</td>
						<td>leaverou</td>
						<td>32G-598</td>
					</tr>
					<tr>
						<td>Farnaz Jahanbakhsh</td>
						<td>TA</td>
						<td>farnazj</td>
						<td>32G-598</td>
					</tr>
					<tr>
						<td>Luke Murray</td>
						<td>TA</td>
						<td>lsmurray</td>
						<td>32G-596</td>
					</tr>
					<tr>
						<td>Jumana Almahmoud</td>
						<td>TA</td>
						<td>jumanam</td>
						<td>32G-598</td>
					</tr>
				</tbody>
			</table>
			<p>Demand to have some of whatever the human is cooking, then sniff the offering and walk away kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff play riveting piece on synthesizer keyboard.</p>
			<p>Sleep in the bathroom sink sit on the laptop so nyan fluffness ahh cucumber! play time, and scratch the furniture for run at 3am soft kitty warm kitty little ball of furr. Purr while eating get video posted to internet for chasing red dot.</p>
			<p>Purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table man running from cops stops to pet cats, goes to jail, and jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Licks paws being gorgeous with belly side up hiiiiiiiiii feed me now yet slap kitten brother with paw jump around on couch, meow constantly until given food, so catching very fast laser pointer.</p>
			<p>I like fish Gate keepers of hell for mice, for leave buried treasure in the sandbox for the toddlers pet my belly, you know you want to; seize the hand and shred it! for meow meow mama. Hunt anything that moves throwup on your pillow, so have my breakfast spaghetti yarn yet cat cat moo moo lick ears lick paws or cats are a queer kind of folk sit in a box for hours. Loves cheeseburgers suddenly go on wild-eyed crazy rampage cough.</p>
			<p>Loved it, hated it, loved it, hated it trip on catnip, purr while eating jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water kitty run to human with blood on mouth from frenzied attack on poor innocent mouse, don't i look cute? mark territory, but run at 3am.</p>
			<p>Wake up human for food at 4am stand with legs in litter box, but poop outside or cat sit like bread see owner, run in terror. Making sure that fluff gets into the owner's eyes destroy couch as revenge but hit you unexpectedly, present belly, scratch hand when stroked in the middle of the night i crawl onto your chest and purr gently to help you sleep if it fits, i sits and going to catch the red dot today going to catch the red dot today. Play riveting piece on synthesizer keyboard spill litter box, scratch at owner, destroy all furniture, especially couch and kitty scratches couch bad kitty roll on the floor purring your whiskers off and friends are not food or oooo! dangly balls! jump swat swing flies so sweetly to the floor crash move on wash belly nap so really likes hummus.</p>

Notes

position: sticky is a hybrid of relative and fixed:
- If the element is in view, it behaves like relative.
- If the element is not in view (the user has scrolled), but its containing block is, it behaves like fixed
- If its parent gets out of view as well, it behaves like relative again
Note that position:sticky doesn't do anything by itself, you also need offsets!
What happens with horizontal scrolling?

Takeawayposition: sticky makes elements stay in the viewport for as long as their ancestors

Notes

When learning CSS, the precision of absolute positioning may be tempting, but avoid it: It will bite you back later, when you need to make changes!

TakeawayDo not use absolute positioning to avoid figuring out layout: it will bite you back!

Floats

Notes

The float property removes an element from normal flow and sticks it to the left (or right) side of its parent container. Any content that comes below the floated element in the normal layout flow will now wrap around it, filling up the space to the right-hand side of it as far up as the top of the floated element.
While we can add a margin to the float to push the text away, we can't add a margin to the text to move it away from the float.
This is because a floated element is taken out of normal flow, and the boxes of the following items actually run behind the float, as we can see by applying backgrounds.
How could we make this layout more visually interesting and alternate floating the images left and right?

TakeawayFloats push an element to the left or right and flow the rest of the content around it

Problems with floats

What happens when all the floated images are staggered together?
What happens when there is not enough content to flow around the entire vertical edge?
- Can we move the last image upwards?
- clear: both can help with the footer, but is not ideal (try adding some top margin…)

These crude tools (`float` & `clear`) were how CSS layouts were done until ~2015!
🤭🤢🤯

One dimensional layout

Notes

Layout that consists of putting things next to each other is everywhere!

Notes

display: flex enables Flexbox layout on an element. This element becomes the Flex Container and its children are called Flex Items.

flex: N defines the proportion that a flex item spreads over.

flex-direction: column on the flex container makes the items flow from top to bottom

align-items and justify-content on the flex container specify alignment in each direction. Which direction depends on the value of flex-direction

Flexbox concepts
Flex container Flex item

Main axis

Cross axis

One

Two

Three

flex-flow: row

Cross axis

Main axis

One

Two

Three

flex-flow: column

Notes

When elements are laid out as flex items, they are laid out along two axes:

The main axis is the axis running in the direction the flex items are laid out in (for example, as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
The cross axis is the axis running perpendicular to the direction the flex items are laid out in. The start and end of this axis are called the cross start and cross end.
The parent element that has display: flex set on it is called the flex container.
The items laid out as flexible boxes inside the flex container are called flex items

Flexbox concepts: alignment

Main axis

Cross axis

One

Two

Three

flex-direction: row;
align-items:

;
justify-content:

Cross axis

Main axis

One

Two

Three


					flex-direction: column;
					align-items:

initial

;
					justify-content:

initial

TakeawayFlexbox

Alignment in one axis (set which one with flex-direction)
Activate with display: flex
flex to stretch items proportionally
auto margins distribute available space
align-items and justify-content to control alignment

Notes

Let's lay out this header horizontally

display: flex enables Flexbox layout on an element. This element becomes the Flex Container and its children are called Flex Items.

flex: N defines the proportion that a flex item spreads over.

flex-direction: column on the flex container makes the items flow from top to bottom

align-items and justify-content on the flex container specify alignment in each direction. Which direction depends on the value of flex-direction

Hands-on time!

You may find useful: display gap flex align-items justify-content :focus-within flex-grow

Save your codepen and submit to

Finished early? Experiment with the rest of the styling, change the logo, the menu items, go crazy!

🐢 It’s flex containers all the way down! 🐢

Notes

display: contents hides an element's box (and thus if the element is a flex item, it makes its children flex items) but still displays its descendants.

TakeawayElements with `display: contents` do not render their own box, but do render their descendants’ boxes

Corollary: If inside a flex container, their children become flex items instead of themselves

flex
- flex-grow
- flex-shrink
- flex-basis

flex-flow
- flex-direction
- flex-wrap

gap
- column-gap
- row-gap

<p>Cat ipsum dolor sit amet, bite the neighbor's bratty kid love you, then bite you or need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Run outside as soon as door open.</p>
			<p>Sit on the laptop i will be pet i will be pet and then i will hiss, refuse to drink water except out of someone's glass or cough furball for run up and down stairs cats go for world domination suddenly go on wild-eyed crazy rampage.</p>
			<p>Rub against owner because nose is wet dream about hunting birds climb a tree, wait for a fireman jump to fireman then scratch his face. You are a captive audience while sitting on the toilet, pet me i vomit in the bed in the middle of the night for sleep all day whilst slave is at work, play all night whilst slave is sleeping stretch, yet find a way to fit in tiny box. </p>
			<p>Munch, munch, chomp, chomp. Peer out window, chatter at birds, lure them to mouth then cats take over the world eat the fat cats food. Man running from cops stops to pet cats, goes to jail intently stare at the same spot, friends are not food or litter kitter kitty litty little kitten big roar roar feed me fish i must find my red catnip fishy fish sit in box eat fish on floor.</p>
			<p>Demand to have some of whatever the human is cooking, then sniff the offering and walk away kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff play riveting piece on synthesizer keyboard.</p>
			<p>Sleep in the bathroom sink sit on the laptop so nyan fluffness ahh cucumber! play time, and scratch the furniture for run at 3am soft kitty warm kitty little ball of furr. Purr while eating get video posted to internet for chasing red dot.</p>
			<p>Purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table man running from cops stops to pet cats, goes to jail, and jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Licks paws being gorgeous with belly side up hiiiiiiiiii feed me now yet slap kitten brother with paw jump around on couch, meow constantly until given food, so catching very fast laser pointer.</p>
			<p>I like fish Gate keepers of hell for mice, for leave buried treasure in the sandbox for the toddlers pet my belly, you know you want to; seize the hand and shred it! for meow meow mama. Hunt anything that moves throwup on your pillow, so have my breakfast spaghetti yarn yet cat cat moo moo lick ears lick paws or cats are a queer kind of folk sit in a box for hours. Loves cheeseburgers suddenly go on wild-eyed crazy rampage cough.</p>
			<p>Loved it, hated it, loved it, hated it trip on catnip, purr while eating jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water kitty run to human with blood on mouth from frenzied attack on poor innocent mouse, don't i look cute? mark territory, but run at 3am.</p>

MultiCol Layout

Multiple Column Layout is another type of single-dimensional layout mode.
It is activated by using columns, column-count, or column-width
gap allows you to control spacing between columns
column-rule allows you to add lines between columns. Its syntax is similar to border.

Notes

Multicol is not only about text, it can be used to lay out any element

columns
- column-count
- column-width

gap
- column-gap
- row-gap

column-rule
- column-rule-color
- column-rule-style
- column-rule-width

column-span

Grid Systems

Notes

In graphic design, as in architecture, the guts of a finished product are held up by an underlying support structure that—more often than not—is invisible to the viewer, but can just as easily make or break a design.

Grids are everywhere

Which design principles does a grid facilitate?

On the Web, grids must be flexible

How do we implement grids with CSS?

<header>
				<h1>Sir Adam Catlace</h1>
				<p>An awesome cat</p>
			</header>
			<aside>
				<ul>
					<li><a href="https://facebook.com/adamcatlace">Follow Sir Adam on Facebook</a></li>
					<li><a href="https://twitter.com/adamcatlace">Follow Sir Adam on Twitter</a></li>
					<li><a href="https://instagram.com/adamcatlace">Follow Sir Adam on Instagram</a></li>
				</ul>
				<p>
				Fat baby cat best buddy little guy i'm going to lap some water out of my master's cup meow. Meoooow milk the cow and cough for when in doubt,
				</p>
			</aside>
			<main>
				<p>hiiiiiiiiii feed me now or leave fur on owners clothes eat the rubberband the cat was chasing the mouse. I love cuddles hide head under blanket so no one can see yet meow to be let in yet love me! but the dog smells bad.</p>
				<p>Cat ipsum dolor sit amet, bite the neighbor's bratty kid love you, then bite you or need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Run outside as soon as door open.</p>
				<p>Rub against owner because nose is wet dream about hunting birds climb a tree, wait for a fireman jump to fireman then scratch his face. You are a captive audience while sitting on the toilet, pet me i vomit in the bed in the middle of the night for sleep all day whilst slave is at work, play all night whilst slave is sleeping stretch, yet find a way to fit in tiny box. </p>
				<p>Munch, munch, chomp, chomp. Peer out window, chatter at birds, lure them to mouth then cats take over the world eat the fat cats food. Man running from cops stops to pet cats, goes to jail intently stare at the same spot, friends are not food or litter kitter kitty litty little kitten big roar roar feed me fish i must find my red catnip fishy fish sit in box eat fish on floor.</p>
			</main>
			<footer>
				Copyright ©2020 Sir Adam Catlace
			</footer>

Grid Layout

display: grid enables Grid layout on an element. This element becomes the Grid Container and its children are called Grid Items.
display: grid doesn’t do much on its own, you also have to define the Grid template. There is a number of properties to do that, such as:
- grid-template-rows
- grid-template-columns
- grid-template
- …and many more
The 1fr unit allows us to distribute the available space in fractions without having to do any math with percentages.
The gap property allows us to set spacing between the grid cells.
The grid-row and grid-column properties allow us to place items on specific rows and/or columns. Note that multiple items can be placed in the same cell, and then they will overlap!

Some terminology…

Grid cell

A single unit of a CSS grid

Grid Lines

The vertical and horizontal lines that divide the grid and separate the columns and rows.

Grid area

Rectangular space surrounded by four grid lines. A grid area can contain any number of grid cells.

Grid track

The space between two grid lines.

Grid track

This space can be horizontal or vertical

Grid row

A horizontal track of a grid

Grid column

A vertical track of a grid.

Gutter

The space between rows and columns in a grid

Grid Container

The element with display: grid

Grid Item

Any element that is a direct child of a grid container

Grid Layout

Defining named areas is another way to specify a grid.
grid-area allows you to assign an element to a named area.
Then, rearranging elements on the grid is just a matter of editing the grid template!

grid
- grid-template
  - grid-template-rows
  - grid-template-columns
  - grid-template-areas
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow

grid-area
- grid-row
  - grid-row-start
  - grid-row-end
- grid-column
  - grid-column-start
  - grid-column-end

grid-gap
- grid-column-gap
- grid-row-gap

Notes

grid-row and grid-column allow us to control which grid lines elements fall on.
Grids do not always need to be precise
You specify the constraints that matter to you and the auto placement algorithm figures out the rest

Notes

The repeat allows us to create multiple columns or rows with the same metrics
Replaced elements with intrinsic dimensions still retain them in grid layout, unless set otherwise
grid-row-end and grid-column-end allow us to make elements span multiple grid cells without explicit control of which grid cells they fall on.
The dense keyword in grid-auto-flow prevents holes

Notes

Similarly to Flexbox, display:contents allows us to make descendants grid children
Text nodes are grid items too!

Topics for today

Block elements

Inline elements

Inline-block elements

Replaced elements

How do we break out of the flow and lay elements over others?

Terminology Positioned element is any element with position != static

TakeawayUse the offset properties to control the placement of positioned elements

TakeawayA relatively positioned element still occupies the same space but can be moved with offset properties

Takeawayposition: absolute takes elements out of normal flow and places them over everything else

TakeawayAny positioned element is a containing block of any positioned descendants = that's where top, right, bottom, left count from

Takeawayposition: fixed allows us to position elements in the same place regardless of scrolling

Takeawayposition: sticky makes elements stay in the viewport for as long as their ancestors

TakeawayDo not use absolute positioning to avoid figuring out layout: it will bite you back!

TakeawayFloats push an element to the left or right and flow the rest of the content around it

These crude tools (float & clear) were how CSS layouts were done until ~2015! 🤭🤢🤯

Flexbox concepts Flex container Flex item

Flexbox concepts: alignment

TakeawayFlexbox

Hands-on time!

🐢 It’s flex containers all the way down! 🐢

TakeawayElements with display: contents do not render their own box, but do render their descendants’ boxes

Grids are everywhere

Which design principles does a grid facilitate?

On the Web, grids must be flexible

How do we implement grids with CSS?

Terminology
Positioned element is any element with `position` != `static`

TakeawayAny positioned element is a containing block of any positioned descendants
= that's where top, right, bottom, left count from

These crude tools (`float` & `clear`) were how CSS layouts were done until ~2015!
🤭🤢🤯

Flexbox concepts
Flex container Flex item

TakeawayElements with `display: contents` do not render their own box, but do render their descendants’ boxes