Is there an issue with the grid-template-areas property showing an error for an invalid

Currently, I am in the process of designing a webpage called vijesti.html using CSS Grid layout to showcase three different types of news items:

click here for grid layout under 800px

click here for grid layout over 800px

The "Main News" section (.mainNews) occupies the entire width. It is set to have a 1:2 aspect ratio on screens wider than 800px and 1:1 on smaller screens.

The "Vertical News" section (.verticalNews) takes up 25% width on larger screens and 50% on smaller screens. Its height is always double its width.

The "Square News" section (.squareNews) has equal width and height. It covers 25% width on bigger screens and 50% on smaller screens.

I attempted to use grid-template-areas but encountered an error stating "Invalid property value." How can I correctly configure grid-template-areas for this design, or is there an alternative solution?

This is the code snippet I composed:

<body>
    <div class="news">
        <div class="mainNews">News</div>
        <div class="verticalNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="verticalNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="verticalNews">News</div>
        <div class="verticalNews">News</div>
    </div>
</body>

body {
    background-color: #cdc3a9;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}


.news {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas: 
    "main main main main"
    "vertical square square vertical"
    "vertical square square vertical"
    "square square vertical vertical"
    "square square vertical vertical"
}

.mainNews {
    grid-area: main;
    background-color: #c9daf8;
}

.verticalNews {
    grid-area: vertical;
    background-color: #fff2cc;
}

.squareNews {
    grid-area:square;
    background-color: #f4cccc;
}

Adding media queries is part of my future plans, but my primary focus right now is resolving this issue.

htmlcss

Answer №1

Here is my recommended approach, with a more detailed explanation provided below.

HTML Layout:

<body>
    <div class="news">
        <div class="mainNews">News</div>
        <div class="verticalNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="verticalNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="squareNews">News</div>
        <div class="verticalNews">News</div>
        <div class="verticalNews">News</div>
    </div>
</body>

CSS Styling:

body {
    background-color: #cdc3a9;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.news {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    grid-template-areas: 
        "main main main main"
        "vertical square square vertical"
        "vertical square square vertical"
        "square square vertical vertical"
        "square square vertical vertical";
}

.mainNews {
    grid-area: main;
    background-color: #c9daf8;
    /* Aspect ratio 2:1 for larger screens */
    aspect-ratio: 2 / 1;
}

.verticalNews {
    grid-area: vertical;
    background-color: #fff2cc;
    /* Aspect ratio 1:2 */
    aspect-ratio: 1 / 2;
}

.squareNews {
    grid-area: square;
    background-color: #f4cccc;
    /* Aspect ratio 1:1 */
    aspect-ratio: 1 / 1;
}

/* Media query for screens smaller than 800px */
@media (max-width: 800px) {
    .news {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "main main"
            "vertical vertical"
            "square square"
            "square square"
            "square square";
    }

    .mainNews {
        aspect-ratio: 1 / 1; /* Change to 1:1 for smaller screens */
    }

    .verticalNews {
        /* Change to 50% width on smaller screens */
        grid-column: span 2;
        aspect-ratio: 1 / 2;
    }

    .squareNews {
        grid-column: span 1;
    }
}

Explanation:

  1. Adjusting Aspect Ratios:
    • The aspect-ratio property is utilized for each news item to manage its width-to-height proportion. For instance, the .mainNews has a 2:1 aspect ratio on wider screens and switches to 1:1 in the media query for screens under 800px.
  2. Media Query Modifications:
    • Within the media query, the layout is altered to a 2-column grid (
      grid-template-columns: repeat(2, 1fr);
      ).
    • The grid areas are reorganized to suit the narrower layout, with the .mainNews and .verticalNews elements spanning across the full width.
  3. Grid Areas for Repeated Elements:
    • As grid-template-areas is intended to establish a basic grid template layout, it doesn't automatically consider individual, repeated elements like squareNews and verticalNews. These items are styled based on their class but are positioned in the grid using the specified areas.

Answer №2

Ensure that you include a semicolon at the end of your final template area line.

Your areas layout is also causing an issue, as stated in the mdn for grid-template-areas documentation: "If those cells do not form a rectangle, the declaration will be considered invalid".

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

What is the reason that when a <div> click on a mobile device includes a jQuery ('#item').fadeOut() function, the CSS of the '#item' element maintains its previous hover state

While creating a mock back to top button, I encountered an issue with my jQuery call to fadeOut() behaving differently on mobile devices (this discrepancy can be observed using any desktop browser simulator). You can find the source code here: https://cod ...

javascriptjqueryhtmlcssmobile

Guide to swapping images based on conditions using Angular JS

I am trying to display an image based on data received from an API response instead of text. If the value is true, I want to show an access symbol. If the value is false, I want to show a deny symbol. However, when attempting this, I am only getting th ...

javascripthtmlangularjs

Navigating to web pages with no Twig integration using Symfony

As I integrate a legacy system into Symfony, I've come across some pages with static HTML content that doesn't utilize Twig. I'd like to directly route to these pages without involving any controllers. /aboutus should point to /web-director ...

phphtmlsymfonymodel-view-controllertwig

Three fluid horizontal DIVs aligned side by side

Is there a way for me to align three divs beside each other, each with unique background images? The center div should be 989px wide, while the widths of the left and right divs can vary. ...

htmlwidthalignment

Angular 2/4: Struggling to refresh child component's view

I need assistance with updating the value of "str" in the child component's view from the parent component. I want to do this by calling the "change()" function in the child component. Here is my code: import { Component } from '@angular/core&ap ...

htmlangulartypescript

The react-transition-group fails to function properly until the page is reloaded

My task scheduler using React Router 5 and React Redux is working fine. Now I am trying to animate transitions between different routes using react-transition-group. When I click the URL changes, but the screen does not re-render until I manually reload ...

cssreactjsreduxreact-hooksreact-router

bring in all the files located within the Directory

Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...

javascriptphphtmlcsshead

I am unable to display the service response in the Angular component

I'm facing an issue with displaying data in an angular component from a service. The process from the service to the component seems fine, but when I try to use the variable in HTML, it doesn't show the result. For this project, I am using the M ...

javascripthtmlangulartypescriptmetronic

JQuery magic: A shrinking header that changes size as you scroll

There have been countless inquiries regarding how to animate a header to shrink as the page is scrolled down. While I have some understanding of the responses to similar questions, I find my case to be rather complex. The header on my page takes up too muc ...

jqueryhtmlcssheadershrink

Issue with Firefox when combining text-transform and text-overflow properties

Hope everything is going well. I encountered a challenging issue that I need help with (please run the snippet using firefox on Windows or Linux) : <html> <head> <style> .content { backgro ...

htmlcssfirefox

When HTML anchors are placed over thumbnails, they can cause white stripes to appear underneath the

I have organized my thumbnails in an unordered list, but I'm encountering an issue where the anchor tag seems to overlap them, creating white stripes underneath. Below is the code I am currently using: HTML: <div class="wrapper"> & ...

htmlcssanchor

What steps should be followed in order to replicate the border design shown in the

Checkboxes Border Challenge I am looking to connect the borders between my checkboxes. I attempted to use pseudo-borders, but encountered issues with setting the height for responsiveness across various screens. If anyone has suggestions on how to tackl ...

cssresponsive-designbootstrap-5borderpseudo-element

I prefer to transmit information in HTML format rather than using Excel files

Here is my approach, however the response I am getting is a basic HTML. I attempted to duplicate successful code from method2 inside ExportReportChip() but it seems to not be functioning as expected. public ActionResult SuccessFulMethod(DateTime reference ...

c#html.netexcel

Integrating autoprefix-cli into ANT build

I've been attempting to integrate autoprefix-cli into my ANT build. The code snippet below shows what I've tried so far. <target name="auto"> <apply executable="autoprefixer-cli.bat" verbose="true" force="true" failonerror="true"> ...

javacssbuildantautoprefixer

step-by-step guide on showcasing and concealing textbox borders

Within a table, I have a column with a text box for users to edit the text as needed. The edited text is properly being saved using the onkeyup event. However, I want to hide the border of the text box after editing, so only the edited text is visible. If ...

htmlcss

Choosing a file path in JavaScript

Can JavaScript be used to choose a directory? I'm not looking to upload a file, just wanting to select a directory path. (Directory dialog or something similar) ...

javascripthtml

When attempting to interact with a webpage using Python, Selenium is unable to successfully click the button on the

Currently, I am facing a challenge in clicking on a vote button present on a webpage using Python code. Even though I can successfully navigate to the page and interact with other elements like radio buttons, the vote button is not categorized as a "butt ...

pythonhtmlseleniumselenium-webdriverbrowser-automation

How can I dynamically insert HTML content into a data-attribute using JavaScript?

I have been trying to insert a variable that includes HTML code into a DATA attribute (a href ... data-content= ...), but it isn't functioning properly. The code I input seems to delete certain characters and as a result, it does not display correctly ...

javascriptjqueryhtml

Switch out fontawesome icons for SVG icons

I'm looking to replace the Fontawesome icons on this template. The full HTML code is available here, but I only need to swap out one specific icon with an SVG. https://i.sstatic.net/k1DFZ.png <div class="col-md-4"> ...

htmlsvgiconsbootstrap-5font-awesome-5

Transforming jQuery into vanilla JavaScript in order to create a customized dropdown select functionality

I am struggling with converting jQuery code to pure JavaScript for a custom select element. https://codepen.io/PeterGeller/pen/wksIF After referencing the CodePen example, I attempted to implement it with 3 select elements. const select = document.get ...

javascripthtmljquery