Centered Grid Layout Mastery

Introduction

In this lab, we will explore the concept of grid centering using CSS. You will learn how to horizontally and vertically center a child element within a parent element using the grid layout. By the end of this lab, you will have a solid understanding of how to use justify-content and align-items properties to create a perfectly centered layout.

Skills Graph

Grid Centering

index.html and style.css have already been provided in the VM.

To center a child element both horizontally and vertically within a parent element, follow these steps:

1. Create a grid layout using display: grid.
2. Use justify-content: center to center the child horizontally.
3. Use align-items: center to center the child vertically.

Here's an example HTML structure:

<div class="parent">
  <div class="child">Centered content.</div>
</div>

And the corresponding CSS:

.parent {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Grid Centering lab. You can practice more labs in LabEx to improve your skills.