Responsive Layout with Sidebar

Introduction

In this lab, we will be exploring the world of CSS programming. The main objective of this lab is to provide hands-on experience with creating a responsive layout with a sidebar. By the end of this lab, you will have a better understanding of how to use display: grid and minmax() properties to create an effective and visually appealing layout.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/AdvancedLayoutGroup -.-> css/grid_layout("`Grid Layout`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") subgraph Lab Skills css/selectors -.-> lab-35234{{"`Responsive Layout with Sidebar`"}} css/colors -.-> lab-35234{{"`Responsive Layout with Sidebar`"}} css/text_styling -.-> lab-35234{{"`Responsive Layout with Sidebar`"}} css/margin_and_padding -.-> lab-35234{{"`Responsive Layout with Sidebar`"}} css/width_and_height -.-> lab-35234{{"`Responsive Layout with Sidebar`"}} css/display_property -.-> lab-35234{{"`Responsive Layout with Sidebar`"}} css/grid_layout -.-> lab-35234{{"`Responsive Layout with Sidebar`"}} css/backgrounds -.-> lab-35234{{"`Responsive Layout with Sidebar`"}} end

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

To create a responsive layout with a content area and a sidebar, use display: grid on the parent container, minmax() for the second column (sidebar) to allow it to take up between 150px and 20%, and 1fr for the first column (main content) to take up the rest of the remaining space. Here is an example HTML and CSS code:

<div class="container">
  <main>This element is 1fr large.</main>
  <aside>Min: 150px / Max: 20%</aside>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 20%);
  height: 100px;
}

main,
aside {
  padding: 12px;
  text-align: center;
}

main {
  background: #d4f2c4;
}

aside {
  background: #81cfd9;
}

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 Responsive Layout With Sidebar lab. You can practice more labs in LabEx to improve your skills.

Introduction

Skills Graph

Responsive Layout With Sidebar

Summary

Other CSS Tutorials you may like