I am looking to use CSS grid to create a section divided into 3 areas: header (yellow), body (red), and controls (blue). Each area will have its own div as the grid item, with children elements within these divs.
https://i.sstatic.net/A367O.png
Is it possible to align the children within each div based on the grandparent's CSS grid lines? For example, can I make the 'tick' (row2/3 col3/4) in the blue div line up with the 'input' (row2/3 col2/3) in the yellow div?
A grid item has the capability to act as a grid container as well.
In my code snippet, I have provided an approximation of your design concept by establishing an outer container with rows and columns specified in pixel and percentage values respectively. This configuration mirrors the grid line layout depicted in your sketch (i.e., 4 lines / 3 cells horizontally, and 4 lines / 3 cells vertically).
grid-template-columns: 20% 70% 10%;
grid-template-rows: 25px 25px 150px;
Next, each div is aligned within the grid using reference to the grid lines. For example, for the 'blue' element:
.blue {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
By following these CSS rules, the 'blue' field now occupies the full height within the last 10% of the parent grid container.
The blue field can further be treated as a grid container, with considerations given to its neighboring cells. Keeping in mind that the row template for the main grid utilizes pixel heights:
grid-template-rows: 25px 25px 150px;
We can observe that the row heights ratio is 1:1:6, which allows us to define the desired rows within the blue column. Post defining the position of the blue div in the parent grid through the .blue class, we can designate it as a grid container with internal cells, one cell wide and three cells tall, with heights corresponding to fractions of the total height:
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 6fr;
Inside the HTML structure, the region for displaying the tick symbol is nested in a div within the .blue div:
<div class="blue">
<div class="tick">√</div>
</div>
Furthermore, in the stylesheet, the location of the .tick div within the blue grid is specified:
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
To properly position the text content inside the .tick div, it is structured as a flex box utilizing align and justify properties:
display: flex;
justify-content: center;
align-items: center;
Applying similar flex styling to the adjacent yellow box ensures proper alignment with the input field.
You have the flexibility to adjust the heights of the rows in the external container while corresponding changes are made to the fractional heights in the blue container (if pixel height ratio varies). Mixing px, %, and fr units was intentional, emphasizing the independent nature of grid containers within grid items.
In my shopping cart setup, I offer two shipping methods: 'express' and 'standard'. I'm wondering if it's feasible to transmit this data to PayPal using HTML variables? ...
I've been searching for a solution and experimenting with different methods, but I just can't seem to make it work. Below is a CodePen example that showcases a custom checkbox with a toggle function to show/hide a div when checked, along with a ...
Recently, I've been facing some challenges while working with the Kendo UI Editor. Specifically, I'm struggling to retrieve the current font style. My goal is to use JavaScript or jQuery to obtain the following values: Values I am looking for: ...
Having some trouble with the Material UI Drawer component. Whenever I try to display it on my webpage, it automatically focuses on the inner div, adding a shadow or border if the focus is anywhere else. Does anyone know why this shadow appears and how to r ...
Trying to utilize jQuery for loading html posts into the main html page and enabling external scripts to function on them. Utilizing a script (load.js) to load posts into the index.html page: $(document).ready(function () { $('#header').loa ...
When navigating from my home page to the product page, I am encountering an issue with my hamburger button. It appears as though it is clicked but does not open up the menu. However, if I refresh the page, the button works again. Strangely, after refreshin ...
I am trying to wrap a specific <img> tag with a <span> element and assign a class to the <span>. Below is the relevant code snippet: <img id="wrapped-image" alt="" src=""> Despite my efforts, the following code does not seem to w ...
I am working on achieving a layout with multiple SVG elements arranged in a specific way. This layout involves a top-level gray box containing several orange boxes, each of which holds red boxes. The width and height of the top-level SVG are known. https: ...
I am attempting to build a basic carousel using DOM manipulation. I am not sure if it can be done in Angular, but my idea involves creating an array of objects with specific properties that I want to pass to the HTML through interpolation. However, I am ...
I encountered a peculiar issue that I have managed to work around, but I am still curious about why it is happening. Below is the code for my Composite class: import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.clie ...
After reviewing the previously answered topics on the site, I couldn't seem to make the necessary adjustments. Despite setting the size and location in the css file, the large image remains centered and fitting for the screen. The "imaged1" class seem ...
My approach to muting the microphone involves using a mediastream obtained through the sessionDescriptionHandler's userMedia event. session.sessionDescriptionHandler.on('userMedia', onUserMediaObtained.bind(this)) function onUserMediaObta ...
I am utilizing a script that mandates users to input a password with a capital letter, lowercase letter, and number. <input title="Password must contain at least 6 characters, including UPPER/lowercase and numbers" type="password" required pattern="( ...
Here is a simplified version of what I am currently working on: Although I have managed to get the scrolling functionality to work, there seems to be an issue with transitioning from one section to another. For example, when clicking on NUMBER 3, it s ...
I am currently creating a questionnaire that consists of 10 questions and calculates a score called total. If the total < 10, I want the screen to turn red. However, this required me to remove the previous wallpaper that was set: /*body{ backgr ...
Is there a way to insert images into the "choicesDiv" without having to make changes to the HTML & CSS? Here is the table code: <table id="choices"> <tr> <td><div class="choicesDiv" value="1"></div></td> ...
Currently, I have implemented this CSS rule in the body selector: body { text-align:center } However, it seems like this rule is inheriting down to all other text elements on the page. Is there a way to prevent CSS from applying this rule to other elem ...
I'm curious if it's possible to rearrange the boxes when the window size is reduced. Currently, they are displayed like this: Big window But when I shrink the window, it looks like this: Small window What I would like to achieve is to have th ...
Is there a way to make the image column stack below the text info column in mobile view? I've tried using flexbox without success, so any help would be greatly appreciated. Thank you! <div class="container"> <div class="row"> ...
I'm currently in the process of developing a program that showcases various topics within a specific subject. My main query revolves around whether or not the DataTable functionality will be compatible with this particular setup. The following is th ...