Tailwind Crash Course - Project Based Learning
Flexbox Challenge
#Block gallery Challenge
We have learned all about flexbox. Now, this time for us to get down and dirty and try to get something on the page.
Alright! So here is what I have setup for us.
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<!-- Must take up all of the available space -->
<!-- Evenly distributed 3x3 grid -->
<!-- Letters must be centered on the square -->
<!-- Must have some spacing between the blocks -->
<div class=""> <!-- div container -->
<div class="bg-teal-100">A</div>
<div class="bg-teal-200">B</div>
<div class="bg-teal-300">C</div>
<div class="bg-teal-400">D</div>
<div class="bg-teal-500">E</div>
<div class="bg-teal-600">F</div>
<div class="bg-teal-700">G</div>
<div class="bg-teal-800">H</div>
<div class="bg-teal-900">I</div>
</div>
</body>
</html>Here we have a div container that contains nine divs inside. They are just representing each of the share of the teal colour scheme. Each one of those has letter inside (A-B-C-D-E-F-G-H-I). Okay! Below are the rules for this challenge:
- Must take up all of the available space (vertically and horizontally). Boxes under container need to cover entire viewport
- Evenly distributed 3x3 grid
- Letters must be centered on the square (vertically and horizontally)
- Must have some spacing between the blocks
Result should be this:
Click here for the solution.
