HTML-CSS: Responsive layout with sidebar

Last update on March 08 2024 13:35:21 (UTC/GMT +8 hours)

HTML-CSS : Exercise-35 with Solution

Using HTML, CSS creates a responsive layout with a content area and a sidebar.

Use display: grid on the parent container, to create a grid layout.
Use minmax() for the second column (sidebar) to allow it to take up between 150px and 20%.
Use 1fr for the first column (main content) to take up the rest of the remaining space.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS creates a responsive layout with a content area and a sidebar.</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="w3r-container"><!-- Comment: Creates a container for the layout -->
<main><!-- Comment: Defines the main content area -->
    w3resource.com <!-- Comment: Text content of the main section -->
</main>
<aside><!-- Comment: Defines the sidebar -->
    Max: 25% / Min: 150px <!-- Comment: Text content of the sidebar -->
</aside>
</div>
</body>
</html><!-- Comment: End of the HTML document -->

Explanation:

The <head> section contains metadata about the HTML document, such as character encoding and viewport settings.
The <title> tag sets the title of the HTML document.
The <body> section contains the visible content of the HTML document.
Inside the <body> section, a <div> element with the class "w3r-container" is used to create a container for the layout.
The <main> tag defines the main content area of the layout.
The <aside> tag defines the sidebar content.
Text content inside the <main> and <aside> tags provides placeholder content for demonstration purposes.

CSS Code:

.w3r-container {
  display: grid; /* CSS: Defines a grid container for the layout */
  grid-template-columns: 1fr minmax(25%, 150px); /* CSS: Specifies the grid layout with two columns:
                                                      - The first column takes up the remaining space with equal distribution
                                                      - The second column has a minimum width of 25% and a maximum width of 150px */
  height: 100px; /* CSS: Sets the height of the grid container */
}

main, aside {
  padding: 12px; /* CSS: Adds padding to the main and aside elements */
  text-align: center; /* CSS: Centers the text content horizontally within main and aside elements */
}

main {
  background: #cc87ff; /* CSS: Sets the background color of the main element */
}

aside {
  background: #ff78cc; /* CSS: Sets the background color of the aside element */
}

Explanation:

The .w3r-container class defines the styles for the container element using CSS grid layout.
grid-template-columns property specifies the layout of the grid columns, where the first column takes up the remaining space (1fr) and the second column has a minimum width of 25% and a maximum width of 150px (minmax(25%, 150px)).
height property sets the height of the container to 100px.
main and aside selectors apply styles to the main content area and the sidebar, respectively.
Both main and aside elements have padding and text alignment set to center.
Background colors are set for main and aside elements to distinguish them visually.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.