CSS: The grid-column and grid-row properties are malfunctioning

I'd like to create a grid with one column containing multiple rows of text, and the second column having an equal number of input rows. My initial plan was to create a grid where the number of rows equals the number of lines of text, and then define the necessary columns.

.AllScores{
    display: grid;
    grid-template-columns: 450px 200px auto 50px 50px 50px 50px 50px;
    grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
}

.AllScores_text{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: #289e19 ;
    text-align: right;
}

.AllScores_inputs{
    grid-column: 2;
    grid-row: 1;
    background-color: #199a9e ;
    text-align: left;
}

So, AllScores serves as my "grid container," with AllScores_text representing the first cell in the grid, and AllScores_inputs representing the second cell in the first row.

Starting simple due to being new to CSS and HTML, I encountered issues with grid-column/row-start/end not working, even after trying just using grid-column and grid-row.

I require the flexibility of a grid for future adjustments; while I could use a table for now, I may need to merge cells later on, hence the exploration of grids.

Below is the HTML code:

<div class='AllScores'>
    <form action="{{ actual_age_range }}/Scores_Gathered" method="post">
                {% csrf_token %}
        <div class='AllScores_text'>
            <label for="DM1_Pref_Hand">Score DM1 - Tirelire (Main préférée) : </label>
        </div>
        <div class='AllScores_inputs'>
            <input id="DM1_Pref_Hand" type="text" name='DM1_Pref_Hand' value="{{ DM1_PH }}">
        </div>
    </form>
</div>

Thank you in advance for any help or insight! ^^

Answer №1

When using grid-column or grid-row for the first time, it is important to remember that it is a shorthand property.

You need to specify both the starting and ending column/row positions. For example:

.AllScores_text {
grid-column: 1 /2;
grid-row: 1 / 2;
}

The reason why .AllScores_inputs isn't working is because it is missing the ending column and row values.

You can verify this by inspecting the element in your internet browser to see the outcome.

I hope this information helps you understand better.

Answer №2

Hooray, I have successfully tackled my dilemma: upon examining my HTML, I noticed that I used the class = 'AllScores' in the initial div element. The problem arose when I had a form followed by another div utilizing the "element" of the grid.

What this signifies is, based on what I've grasped, if you intend to employ a grid and define column/row properties within a "sub grid class," this sub grid must be directly called within the grid container.

In my scenario, I had:

<div class='AllScores'>
    <form>
        <div class='AllScores_text'>
            ...
        </div>
        <div class='AllScores_inputs'>
            ...
        </div>
    </form>
</div>

Therefore, since the classes of the sub grid (AllScores_inputs and AllScores_text) were nested within the form, which was inside the .

I needed to place the call for class='AllScores_inputs' immediately after the call for class = AllScores.

So, these two options are effective: inserting the class='AllScores' within the form :

<div>
    <form class='AllScores'>
        <div class='AllScores_text'>
            ...
        </div>
        <div class='AllScores_inputs'>
            ...
        </div>
    </form>
</div>

or swapping the form and the div :

<form>
    <div class='AllScores'>
        <div class='AllScores_text'>
            ...
        </div>
        <div class='AllScores_inputs'>
            ...
        </div>
    </div>
</form>

Answer №3

By default, the form is set to "display: block". To switch it to a grid layout, update the CSS to "display: grid".

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

Modify the color scheme of an HTML webpage

Looking to enhance my HTML page with a new feature. The page is responsive and currently using Bootstrap CSS and JS. My goal is to allow users to change the color of the page dynamically by selecting a background or text color. Check out this example link ...

Tips on Including a Custom Header in an Ajax Request for a Cross-Domain JsonP Call

Is there a way to add a custom header using an ajax call in jQuery for a cross-domain JSONP call? I am making a web service call in an HTML page using Ajax cross-domain call. I am currently using JSONP and now need to send some parameters in the header. ...

What is the best way to implement the Active list element feature in my menu bar?

The current list element is : <li class="nav__item"><a class="nav__link nav__link--active " href="#"... The standard list element is: <li class="nav__item"><a class="nav__link " href=&quo ...

Difficulty arises when trying to merge a dropdown menu with a horizontally scrolling menu

I am attempting to include a dropdown menu within a horizontally long menu. In order to achieve this, I have merged the script for displaying a scrollable menu with that of a dropdown menu. However, in doing so, the dropdown menu does not pop out from the ...

Unable to apply box-shadow styling to input elements

Why am I having trouble adding box shadows to input elements in my CSS? I've tried something like this http://jsfiddle.net/DLCTh/, and while it applies correctly to div elements, it doesn't seem to work on text inputs. Am I overlooking something ...

What are the steps to designing customizable drop-down content menus on websites?

I am looking to implement a feature where I can create content drop-down bars similar to the ones shown in the images. When a user clicks on the bar, the content should be displayed, and if clicked again, the drop-down should hide. I have searched for a so ...

Animating CSS using JavaScript

Recently diving into the world of JavaScript, I've taken on the challenge of creating an analog clock. I began by crafting the second hand using CSS but now I'm eager to transition it to Javascript without relying on jQuery or any other JS framew ...

What is causing my column's content to be lacking padding on the left side and having excessive padding on the right side?

Edit: Here's the link to the codepen https://codepen.io/maptik/pen/bGKMgpJ In my React project, I'm utilizing Bootstrap to display cards for each "Product". Here is a snippet of how I am rendering it: <div className="container bg-color- ...

Even when autocomplete is disabled, Firefox continue to cache hidden input fields

I'm encountering an issue with a form that has the autocomplete attribute set to off. Within this form, there is a hidden input element (created using ASP.NET MVC's Html.HiddenFor() method): <input type="hidden" value="0" name="Status" id="S ...

Modifying Div Size with Jquery

I am working on populating the div container with square boxes, but I'm having trouble adjusting the size of my #gridSquare div. Despite trying to change its height and width using jQuery, it doesn't seem to work as expected. $('#gridSquare ...

Transitioning between sections by clicking on a navigation menu item

I'm looking to create a cool animation effect on my website. When a user clicks on a specific menu link, such as "about-section," I want the page to smoothly scroll down to that section in a parallax style. If anyone knows of a jQuery plugin that cou ...

Is there a way to automatically redirect my login page back to the original page in case of login failure?

I'm currently working on a basic login page using express.js + E.js. If the login credentials are incorrect, I have a variable badLogin that is triggered (see below). However, my goal is to redirect the website back to the login page instead of remai ...

Mobile site's call button functionality is malfunctioning

For the telephone number on my mobile site, I employed the <a href="tel:+1800229933">Call us free!</a> code. However, it seems to be malfunctioning on several devices. Any insight on this issue would be greatly appreciated. Thank you. ...

The dropdown menu button stubbornly remains open and refuses to close

Having an issue with a dropdown menu button where it should open when clicked on the icon and close when clicking off the icon or on the icon again, but instead, it remains open. Here is a screenshot for reference: https://i.stack.imgur.com/UX328.jpg I&a ...

Eliminating a pattern with underscore.js or jquery - the complete guide

I am looking to remove the ellipses (...) from a value such as ...India. How can I achieve this using underscore.js, jQuery, or JavaScript? Any tips on how to accomplish this would be greatly appreciated! ...

Error encountered in ASP.NET Core MVC due to dependency inversion with CRUD operations

Today I delved into dependency inversion. Prior to implementing this concept, my CRUD system was functioning well, but now I am encountering some errors. The error message says "Cannot implicitly convert type int to ContractLayer.UsersDto." In the image pr ...

Creating a responsive HTML, CSS, and JavaScript popup: A step-by-step guide

I'm facing a challenge in making my HTML, CSS, and JavaScript popup responsive. Despite looking into various resources, I haven't been able to find a solution that fits my code. However, I am confident that it is achievable to make it responsive! ...

Steps for extracting a portion of the current page's URL

Can someone help me extract a specific part of the current URL using JavaScript? The URL looks something like this: I need to isolate the number "3153038" from the URL and store it in a JavaScript variable. Thank you! ...

Tips for aligning the text in a navigation bar to the center

My CSS skills are not very strong. How can I center the text "My Website" in my navbar based on this code? You can view a working example on JSFiddle here: https://jsfiddle.net/cvp8w2tf/2/ Thank you for your assistance! ...