I find it difficult to customize columns in grid template areas

I am having trouble adjusting the width of my header's columns to be 24vw, 24vw, 4vw, 24vw, and 24vw respectively. Despite specifying these widths, the browser is rendering all columns with equal width. Specifically, I am unable to change the width of the centered div for some unknown reason. The issue only arises when using grid template areas; without them, everything works fine. Why is this happening? Any guidance would be greatly appreciated.

    HTML code:
   

     <div class="head-grid-container">
                <!-- This will be my white banner area. Logos and place name will go here. -->
                <div class="logo-section"> 
                    <div class="logo"><img src="government-logo.png" /></div>
                    <div class="name"><h2 style="font-family: 'Kalam', cursive;">Durbar</h2></div>
                    <div class="logo"><img src="../Visual/logo.png" /></div>
                    <div class="name"><h2 style="font-family: 'La Belle Aurore', cursive;">Durbar</h2></div>
                    <div class="logo"><img src="world-heritage-site-logo.png" /></div>
                </div>
                 <!-- This will be my red banner area. Navigation links will go here. -->
                <div class="links-section">
                    <div class="links-left"><h2 class="left">Palace</h2></div>
                    <div class="links-left"><h2 class="left">Museum</h2></div>
                    <div class="center-logo"><img src="../Visual/home.svg" /></div>
                    <div class="links-right"><h2 class="right">Supervision Office</h2></div>
                    <div class="links-right"><h2 class="right">Development Committee</h2></div>
                </div>
                <!-- This will be my yellow section -->
                <div class="showcase-section">
                    <div class="links-left"></div>
                    <div class="links-left"></div>
                    <div class="center-logo"></div>
                    <div class="links-right"></div>
                    <div class="links-right"></div>
                </div>
            </div>
        
    CSS code:
/* heading grid container customisation */
.head-grid-container{
    display: grid;
    height: 20vh;
    width: 100vw;
    grid-template-columns: 24vw 24vw 4vw 24vw 24vw;
    grid-template-rows: 13vh 6vh 1vh;
    grid-template-areas: 
    "white white white white white"
    "red red red red red"
    "yellow yellow yellow yellow yellow";
}
/* make all the boxes inside the grid table float next to each other using display as flex */
.logo-section{
    grid-area: white;
    display: flex;
    justify-content: space-between;
    background-color: #f5f5f5;
    box-shadow: 2px 8px 8px -6px #141414;
    z-index: 5;
}
.links-section{
    grid-area: red;
    display: flex;
    justify-content: space-between;
    background-color: #d30d0d;
    z-index: 4;
    color:#f5f5f5;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 0.3em;
    box-shadow: 0px 5px 4px -6px #141414;
}
.showcase-section{
    grid-area: yellow;
    display: flex;
    justify-content: space-between;
    background-color: #fec52a;
    z-index: 3;
}
/* make the contents inside grid present at the center of the table */
.logo-section>div, .links-section>div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
/* image width modification */
.logo>img{
    height: 80px;
}
.center-logo>img{
    height: 30px;
}
/*apply shadows to borders*/
.links-left{
    box-shadow: -5px 0px 20px -3px #141414;
}
.links-right{
    box-shadow: 5px 0px 20px -3px #141414;
}
.center-logo{
    box-shadow: 5px 0px 20px -3px #141414, -5px 0px 20px -3px #141414;
}

Answer №1

.head-grid-container {
    display: grid;
    grid-template-columns: 24vw 24vw 4vw 24vw 24vw !important;
    grid-gap: 1px;
    background-color: #2196F3;
   width:100vw !important;
  }
  
  .head-grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 10px;
  }
.logo>img{
    height: 80px;
}
.center-logo>img{
    height: 30px;
   
}
/*apply shadows to borders*/
.links-left{
    box-shadow: -5px 0px 20px -3px #141414;
}
.links-right{
    box-shadow: 5px 0px 20px -3px #141414;
}
.center-logo{
    box-shadow: 5px 0px 20px -3px #141414, -5px 0px 20px -3px #141414;
}
<div class="head-grid-container">
  <!-- This will be my white banner area. Logos and place name will go here. -->

      <div class="first logo"><img src="government-logo.png" /></div>
      <div class="first name"><h2 style="font-family: 'Kalam', cursive;">Durbar</h2></div>
      <div class="first logo"><img src="../Visual/logo.png" /></div>
      <div class="first name"><h2 style="font-family: 'La Belle Aurore', cursive;">Durbar</h2></div>
      <div class="first logo"><img src="world-heritage-site-logo.png" /></div>
 
   <!-- This will be my red banner area. Navigation links will go here. -->
 
      <div class="second links-left"><h2 class="left">Palace</h2></div>
      <div class="second links-left"><h2 class="left">Museum</h2></div>
      <div class="second center-logo"><img src="../Visual/home.svg" /></div>
      <div class="second links-right"><h2 class="right">Supervision Office</h2></div>
      <div class="second links-right"><h2 class="right">Development Committee</h2></div>

  <!-- This will be my yellow section -->

      <div class="third links-left"></div>
      <div class="third links-left"></div>
      <div class="third center-logo"></div>
      <div class="third links-right"></div>
      <div class="third links-right"></div>

</div>

Supposed to be a 3 rows X 5 columns grid, but nested divs are causing it to render as a 1 row X 3 columns grid. Made some CSS adjustments and removed the nested divs.

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

Generate an HTML webpage with dynamic content using MySQL

How can I display data from a MySQL table on an HTML page? The content in my table includes various rows that I would like to show separately on the web page. This is the structure of my table: I envision the web page layout to showcase each row individ ...

An effective approach to positioning HTML elements at specific X and Y coordinates

I have an innovative project idea! The concept is to enable users to create points by clicking on the display. They can then connect these points by clicking again. However, I am facing a challenge when it comes to creating HTML elements at the exact loc ...

What is the best way to generate a CSS design with wavy patterns?

Check out the image below to see what I am attempting to create: https://i.sstatic.net/PlroF.png Here is my current code, but I need to make it more dynamic, similar to increasing the frequency rate of a sin or cosine wave. #wave { position: relativ ...

The Bootstrap glyphicon content breaks when using ASP.NET MVC minification

When working with asp.net, I noticed that minification tends to disrupt the display of bootstrap UTF symbols. For example, here is what it looks like in the original file: .glyphicon-edit:before { content: "\e065"; } And here is how it appears in ...

Guide to sending multiple checkboxes using jQuery AJAX in CodeIgniter

I'm encountering an issue with my code when I click the 'Simpan' button, the response in the URL is: Output in URL: localhost/rootappl/moduls/krs myCheckboxes%5B%5D=KFT106&myCheckboxes%5B%5D=KFT107&submit=Simpan HTML CODE: [IMG] ...

How can you assign a default value in a React select dropdown and dynamically add the remaining values?

I'm currently developing a React application that includes a form with a select dropdown feature. My goal is to have the 'uom' field value from the selected product record automatically set as the default option in the dropdown when the user ...

Adding design to distinct element after clicking a button

Struggling with a JS/Jquery issue on my portfolio website, I admit that I am still just an average programmer. My portfolio website has five buttons, each representing a different project. For each project, there is a corresponding text description and an ...

The native javascript modal fails to appear

I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code: <!DOCTYPE HTML> <html> <head> <script> var dialog = docume ...

The width of mat-table columns remains static even with the presence of an Input field

I'm currently working on an Angular component that serves the dual purpose of displaying data and receiving data. To achieve this, I created a mat-table with input form fields and used {{element.value}} for regular data display. Each column in the tab ...

Steps for incorporating error messages in jQuery Validator:1. Begin by including the

I am currently facing an issue with displaying error messages on my "contact me" form. Although I have successfully implemented validation, I am struggling to comprehend how the errorPlacement function should be utilized. Could someone provide me with a ...

Is it possible to switch between Jquery and CSS?

Using PHP, I have created a CSS file that enables me to easily adjust the color of various elements. Is there a way for me to regenerate the stylesheet and apply it to the DOM using JQuery? For example: <?php if (isset($_POST['mycolor'])){ $ ...

Tips for creating a dynamically responsive eye icon placement

When the screen width is less than 991px, the content is centered but the eye icon that is absolutely positioned goes off-center. This issue only occurs on devices with a small or medium screen size. The reason for using absolute positioning on the icon i ...

What is the best way to assign group headings to my Codeigniter view results?

One of the challenges I'm facing in my view is organizing a list like this: <? foreach($services as $service): ?> <tr> <td><?= $service->name; ?></td> <td><?= $service->format; ?></td> < ...

Enhancing Your Navbar Brand with Images using Flexbox and Bootstrap

I've been working on a project where I decided to customize the Bootstrap navbar by breaking it up into flexboxes in order to align everything according to the specifications. However, I've encountered an issue while trying to place a logo in the ...

Leveraging the power of the Twitter API to integrate real-time tweets into custom code

Looking for an API that can transform a tweet from Twitter into a string format suitable for integration into a program or website. Any recommendations? ...

Creating a user-friendly interface for the admin to easily upload photos by implementing a php/bootstrap/js code within the panel

I'm currently in the process of creating an online website as part of my thesis project. I've been researching this specific code, but unfortunately, I haven't been able to find a solution. In the admin section of the site, I need to enable ...

Unable to get CSS transition to function properly after adding a class using jQuery

I am trying to create a hover effect that shows an image when the mouse is over a specific div, but for some reason, the transition is not working as expected. I understand that using visibility: hidden cannot be animated. Here is the code snippet: $(d ...

Simultaneous CSS3 animations on a pair of items

I am facing a styling challenge with a wrapper div that is positioned absolutely on the side of the page. Inside this wrapper, there is an unordered list of items. Here is the HTML structure: <div id="wrapper"> <ul class="menu"> ...

Expression fragment in Thymeleaf

In splitting my templates into head/main/footer parts using thymeleaf, I have found a method to include stylesheets and javascript on certain pages while excluding them from others. This is achieved through the use of fragment expressions outlined here. M ...

The carousel functionality in Firefox and Opera is currently experiencing issues and is not functioning properly

I have implemented a horizontal carousel at the bottom of my website www.woody.my. The carousel functions properly in Chrome, but is not visible in Firefox, Opera, and IE. Here is how it appears in Chrome: And this is how it looks in Firefox: ...