10.3 Homework/Practice
Homework/Practice:
Objective: Reinforce understanding of
frunits and grid layout configurations by creating a multi-column layout.Instructions:
Create a four-column grid using CSS Grid.
Set up a new HTML file and add a container with the
grid-template-columnsproperty set to1fr 2fr 3fr 1fr, creating columns of varying widths.Add at least eight items inside the grid container to see how they fill the layout.
Example CSS for the Practice Layout:
.four-column-grid { display: grid; grid-template-columns: 1fr 2fr 3fr 1fr; gap: 15px; } .grid-item { background-color: #2196F3; color: white; text-align: center; padding: 20px; font-size: 1em; }
This lesson will give students hands-on experience in setting up a basic CSS Grid layout, using rows and columns effectively, and understanding the flexibility offered by the fr unit.
Student Activity: Creating Layouts with CSS Grid Template Areas
Objective:
Learn how to define and use grid-template-areas in CSS Grid to create responsive and organized webpage layouts. By the end of this activity, students will be able to create their own page layouts by naming grid areas.
Prerequisites:
Basic understanding of HTML, CSS, and CSS Grid properties.
Files Overview:
You have three files to work with:
css-grid-homework10.3B.html: The structure of the webpage.
css-grid-homework10.3B.css: The CSS file for defining the grid layout.
css-grid-homework10.3B-basic.css: The CSS file for basic common styling of individual grid items.
Step-by-Step Procedure
Step 1: Understand the HTML Structure
Open css-grid-homework10.3B.html to examine the structure of the webpage:
The page consists of a
divwith the class namecontainer.Inside the
container, there are four elements: HEADER, MENU, CONTENT, and FOOTER.
<html>
<head>
<link rel="stylesheet" href="css-grid-homework10.3B.css" />
<link rel="stylesheet" href="css-grid-10.2B-basic.css" />
</head>
<body>
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>These elements represent different sections of the page, and you will position them using a grid layout in CSS.
Step 2: Define the Grid Template in CSS
Open index.css to explore how the grid-template-areas property is used to define the layout for the container:
.container {
height: 100%;
display: grid;
grid-gap: 3px; /* Spacing between grid items */
grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
grid-template-rows: 40px auto 40px; /* Defines three rows: header, content, and footer */
grid-template-areas:
"h h h h h h h h h h h h"
"m c c c c c c c c c c c"
"f f f f f f f f f f f f";
}grid-template-columns: Defines 12 equal-width columns usingrepeat(12, 1fr).grid-template-rows: Defines three rows:The first row (header) is
40pxhigh.The second row (main content) has an automatic height.
The third row (footer) is
40pxhigh.
grid-template-areas: Defines the layout structure by using named areas:"h" for header (all 12 columns).
"m" for menu (the first column) and "c" for content (remaining columns).
"f" for footer (all 12 columns).
Step 3: Assign Areas to the Elements
The next step involves assigning each element to a grid area using grid-area. In index.css:
.header {
grid-area: h; /* Assigns the header to the 'h' grid area */
}
.menu {
grid-area: m; /* Assigns the menu to the 'm' grid area */
}
.content {
grid-area: c; /* Assigns the content to the 'c' grid area */
}
.footer {
grid-area: f; /* Assigns the footer to the 'f' grid area */
}By using grid-area, each element is positioned according to the layout defined by grid-template-areas.
Step 4: Style Individual Items
Open basic.css to add styling to the individual elements within the grid:
.container > div {
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}
.container > div:nth-child(1n) {
background-color: #96ceb4; /* Light green */
}
.container > div:nth-child(2n) {
background-color: #ff6f69; /* Pink */
}
.container > div:nth-child(3n) {
background-color: #88d8b0; /* Aqua */
}
.container > div:nth-child(4n) {
background-color: #ffcc5c; /* Yellow */
}This styling adds a consistent color to each grid item and centers the text within each grid cell.
Step 5: Modify the Layout
Now, modify the grid-template-areas in index.css to experiment with the page layout.
Change the Layout: For example, modify the
grid-template-areasto change the positions:
grid-template-areas:
"h h h h h h h h h h h h"
"c c c c c c c c c c c c"
"m m m m m m f f f f f f";This layout makes content take up the entire second row and splits the last row between the menu and footer.
Reflect the Changes: Save your changes and view them in the browser to see how the elements are repositioned based on the new
grid-template-areas.
Step 6: Create Your Own Layout
As a challenge, define your own unique layout using grid-template-areas:
Add a new section called SIDEBAR to the HTML:
<div class="sidebar">SIDEBAR</div>Update the CSS to include the new sidebar and position it as desired:
grid-template-areas:
"h h h h h h h h h h h h"
"m c c c c c c s s s s s"
"f f f f f f f f f f f f";Assign the new sidebar to a grid area:
.sidebar {
grid-area: s; /* Assigns the sidebar to the 's' grid area */
}Step 7: Discuss and Reflect
How did using
grid-template-areassimplify positioning the elements?What are the advantages of naming grid areas compared to using
grid-columnandgrid-row?How does changing the grid areas affect the overall layout?
Step 8: Conclusion
grid-template-areas is a powerful tool that makes the process of laying out your page easier and more readable. It allows you to think of your layout in terms of named sections, making it easier to adjust and modify as needed.
This step-by-step activity will give students hands-on experience with using grid-template-areas to create and modify webpage layouts. Encourage students to experiment with different configurations and observe how the page structure changes in the browser.
Last updated