Struggling with implementing a grid layout using CSS

I am currently facing an issue with my code where I am attempting to set up a wrapper element as a grid. However, upon inspecting the page, I am receiving notifications that my inputs for display, grid-template-columns, and grid-template-area are considered invalid. This situation has left me puzzled; is there anyone who can review this and provide some insight?

Here's the HTML section:

<!DOCTYPE html>
<html lang="en">
...
    </footer>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
...

Below is my CSS related to the wrapper element:

#wrapper {
    width: 100vw;
    height: 100vh;
    background-color: rgb(194, 194, 214);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas: "header header header"
                        "nav nav nav"
                        "aside-1 article aside-2"
                        "aside-3 article-2 aside-4"
                        "footer footer footer";
    align-items: stretch;
    justify-content: center;
}

Answer №1

Make sure to also define the grid area for the children elements, like so:

#container .footer {
    grid-area: footer;
}

If not, they will just fill up the grid in order.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to implement a custom radio tab index without using JavaScript

Is it possible to apply the tabindex attribute on custom radio buttons, hide the actual input element, and use keyboard shortcuts like Tab, Arrow Up, and Arrow Down to change the value? Check out this example on StackBlitz ...

Drop-down Navigation in HTML and CSS is a popular way to create

My navigation menu is functioning well and has an appealing design. The HTML structure for the menu is as follows: <div id="menubar"> <div id="welcome"> <h1><a href="#">Cedars Hair <span>Academy</span></ ...

Ways to prioritize the parent element's style over the child element's style attribute

I am looking to customize the appearance of an unfamiliar HTML code by changing its text color to cyan, regardless of its current color. I attempted the following: <p style="color:cyan !important;"> <span style="color:red;">Hello World</ ...

Switch a div to a computed location

I'm having trouble getting this code to animate a div to a calculated position. Can someone please help me troubleshoot? $(document).ready(function() { var is_Clicked = false; $("#togglebutton").click(function() { if (is_Cli ...

Customize your Jquery UI Calendar with Changing Background Images for Each Month!

How can I change the background of jQuery UI datepicker based on the selected month? I have created 12 classes, each representing a month, and the selected month already has the background. I tried using "onChangeMonthYear: function(year, month, inst) { ...

In React, I'm unable to navigate to a different page

My English may not be the best, but I am working on creating a Login Page. The issue I'm facing is that when I click the Login button, I want to navigate to the Home Page I designed using React. However, whenever I try to implement Link or Route comma ...

Activate the 'li' element within the 'ul' whenever a 'ui-sref' link on the

I have been working on building a dashboard that consists of an abstract state called dashboard, with subdashboard as the immediate child state. https://i.sstatic.net/YTHky.png Previously, clicking on user details would take the user to the dashboard.tab ...

Arrange Bootstrap columns based on the available space within a loop

The content is contained within a md-8 div and generated through a PHP loop. The loop includes sections for: 1. about us 2. areas we cover 3. job board 4. candidates 5. join us 6. contact Due to the limited height of the "areas we cover" section, th ...

flexbox with equal width and height

I have two questions regarding flexboxes but I am unable to find the answers. How can I create 4 boxes with equal width and height, without using the viewport? For instance, if I create a box with 50% width, I want the height to be equal to the width. ...

CSS styling failing to meet desired expectations

Two different elements from different panels are using the same CSS styles, but one displays the desired text while the other does not. The CSS file in question is named grid.css. To see the issue firsthand on my live website, please visit: I am uncertai ...

Is there a way to target the mat-icon element using the icon's name in CSS

I have a group of mat-icons that are automatically generated, meaning I cannot assign them ids or classes. The only way to distinguish between them is by their names: <mat-icon role="img">details</mat-icon> <mat-icon role="img ...

Ways to focus on a specific div using JavaScript

I am attempting to create a 'snow' effect on the background of a particular div with a red border. Here is the code, but you can also view it here: <!-- language: lang-js --> var width = getWidth(); var height = getH ...

Emulate the CSS hover effect with jQuery 코드 희미한

Is there a method in jquery or any other technology that can detect event X and trigger a different event elsewhere? Currently, I am working with an image that has an image map. When a user hovers over a specific area on the map, I would like another part ...

Develop a versatile currency symbol mixin that can be used in various small text formats

I am currently working on a website where I need to display prices in multiple locations. To achieve this, I have created a sass mixin that is designed to add the desired currency symbol before the price with a smaller font-size. Below are examples of how ...

What is the best way to showcase a category on the thumbnail of a WordPress post?

Hey everyone, I hope you're all having a great day! I need some assistance with a slider I'm creating on my WordPress site. I can't seem to figure out how to display the category of each post that appears in the slider and have it stand out. ...

The size of the image remains as is and does not adjust in

For some reason, my image is not adjusting its size properly. Despite searching online for solutions, I have been unable to resolve the issue. According to W3schools, I should set it up like this using the formular-banner class. .formular-banner { ...

Master the art of directing your attention to a list element with ease using the tab function and jQuery

I've been tasked with creating a questionnaire for a client. They want the current active question to be displayed at 100% opacity, while the inactive questions should be at 20% opacity. Currently, when the page loads, all questions are dimmed to 20% ...

Unique Selector Customization

Is there a way to style all custom elements in CSS? I am looking to make custom elements default to block display (as most browsers render them inline by default) and then adjust as needed. A potential rule I have in mind is: *::custom { display: blo ...

The background on my modal remains unchanged

I have integrated a modal using Iframe for user login/registration on my website. Here is the HTML code: <div class="modal" id="ays-popin-connexion" aria-hidden="true"> <div class="modal-body" aria-hidden="true"> <iframe src=" ...

Apply a 2 pixel top border to an HTML table

Is there a way to add a double border at the headcell without using background images? Currently, I have a white color border top and want to add a grey color border on top of the white one. Is it possible to achieve something like #ccc and #fff for borde ...