Is it possible to utilize CSS grids for intermediate column splits? I have provided a graphical example below. Any insight would be greatly appreciated.
https://i.sstatic.net/3KZmP.pnghttps://i.sstatic.net/MA9v2.png
UPDATE: I am currently using display: grid. My goal is to create a responsive layout that stacks each cell vertically on mobile devices.
I have created a sample for you that demonstrates how to properly name grid columns and rows, such as using names like navigation or sidebar.
My recommendation is to double the number of rows and assign the amount of rows twice for the left column. Pay close attention to the grid-template-areas in the .grid CSS.
To make adjustments for smaller devices, you can utilize @media queries on the .grid class to modify the grid-* attributes.
Below is a visual representation of the solution, which may not be the shortest or smartest approach but it offers clarity.
.grid {
height: 200px;
display: grid;
grid-template-columns: 80% auto;
grid-template-rows: repeat(6, 1fr);
grid-template-areas:
“col-1-row-1 col-2-row-1-1”
“col-1-row-1 col-2-row-1-2”
“col-1-row-2 col-2-row-2-1”
“col-1-row-2 col-2-row-2-2”
“col-1-row-3 col-2-row-3-1”
“col-1-row-3 col-2-row-3-2”
}
.col-1-row-1,
.col-1-row-2,
.col-1-row-3,
.col-2-row-1-1,
.col-2-row-1-2,
.col-2-row-2-1,
.col-2-row-2-2,
.col-2-row-3-1,
.col-2-row-3-2 {
justify-self: center;
align-self: center;
}
.col-1-row-1 {
grid-area: col-1-row-1;
}
.col-1-row-2 {
grid-area: col-1-row-2;
}
.col-1-row-3 {
grid-area: col-1-row-3;
}
.col-2-row-1-1 {
grid-area: col-2-row-1-1;
}
.col-2-row-1-2 {
grid-area: col-2-row-1-2;
}
.col-2-row-2-1 {
grid-area: col-2-row-2-1;
}
.col-2-row-2-2 {
grid-area: col-2-row-2-2;
}
.col-2-row-3-1 {
grid-area: col-2-row-3-1;
}
.col-2-row-3-2 {
grid-area: col-2-row-3-2;
} <div class="grid">
<div class="col-1-row-1">Col 1 Row 1</div>
<div class="col-1-row-2">Col 1 Row 2</div>
<div class="col-1-row-3">Col 1 Row 3</div>
<div class="col-2-row-1-1">Col 2 Row 1.1</div>
<div class="col-2-row-1-2">Col 2 Row 1.2</div>
<div class="col-2-row-2-1">Col 2 Row 2.1</div>
<div class="col-2-row-2-2">Col 2 Row 2.2</div>
<div class="col-2-row-3-1">Col 2 Row 3.1</div>
<div class="col-2-row-3-2">Col 2 Row 3.2</div>
</div>To add a new HTML element below, you can simply place it in column 2 or row 1 and apply the following style:
display: grid; grid-template-rows: auto/auto; align-self: centerCurrently working on a college project centered around developing a personal website and I could use some assistance with aligning the Button to move along with the sidebar. When clicking on the hamburger menu, the sidebar shifts to the right, and then ba ...
I've implemented the collapse feature using Bootstrap, but encountered an issue where my nav elements disappear when resizing the window. Do you have any suggestions on how to fix this? Here's a snippet of my code: Navb ...
Currently, I am working on a WordPress project. I have created my own template using CSS and HTML format. The implementation is going well, but I am facing difficulty integrating WP pagination design into my template. Below is the pagination code from my ...
I have uploaded a screenshot here, but I am puzzled as to why the font size appears differently on the Android browser in portrait and landscape modes. $(document).ready(function(e) { var x=$(".main").css("font-size"); alert(x) }); .main{ font-size: ...
When I attempt to click on this specific link: <a id="table_statementlist_get_ib_table:0:ordernumber" class="OraLink" href="#" onclick="return _chain('disable_load_window();','submitForm(\'ib_trn_base_pas_statementlist_get&bsol ...
Looking for a map of the UK displaying counties that users can click on? I've discovered that instead of using flash, image maps with a large png county map will do the trick. However, the process of manually clicking dots between counties could take ...
I am currently developing a simple RSS reader application where, upon clicking a 'story', the relevant information is displayed in a modal view. The 'stories' or RSS feed items are presented in a scrolling row. However, I have encounte ...
My goal is to create a dynamic N-by-2 grid that adjusts its display based on run-time factors, resulting in an unknown number of rows and columns at design time. The grid could have different configurations like: 1 2 3 4 5 or 1 2 4 5 (missing 3) or ...
I am working on a project that involves a form for users to fill out an application. Within this form, there is a table that displays the user's language skills. Additionally, I have a seeder in the project that provides all the available languages in ...
i am looking to create a component similar to this https://i.sstatic.net/fwIB0.png currently, I am utilizing a material UI pop menu in my project below is the JSX code snippet <div className="navMenu" style={{ position: "relative" ...
I am trying to create a custom click effect for the MUI Button by removing the default ripple effect and implementing my own shadow effect. I have disabled the ripple using disableRipple, but I am facing issues in applying the shadow effect when the user c ...
I currently have a DIV that reveals another DIV when clicked, and it works perfectly. However, I run into an issue when I try to replicate the effect further down the page with the same ID's - nothing happens. Here is my script: <script> $(docu ...
I am struggling with transferring data between controllers using a service. I expect that when the "send data" button is clicked, the information entered into the text field should appear in the Results controller. However, nothing seems to be showing up. ...
I recently developed an iframe to open a chat site I built using React.js and Tailwind. The iframe is loaded dynamically on the website through javascript. However, I noticed that when I click on the input field inside the iframe, the content appears blurr ...
My goal is to dynamically load the data-caption of thumbnail images when clicked, and then update the main image's data-caption when the main image is changed with a thumb image. I am currently struggling to make the data-caption update along with the ...
Similar Question: How can PHP be used to parse and process HTML? I am attempting to extract data from a webpage using PHP's file_get_contents() function. The specific page contains JSON enclosed within some HTML structure, which I would like to r ...
I'm facing an issue with CRUD operations in my Angular 5 application. The GET and POST methods are working fine, but the DELETE method is not removing dynamic data as expected. The error message I'm encountering is: DELETE http://172.16.47.34:8 ...
There are two div elements nested within each other. The first div is nested inside the second one. To view this issue, click on the following: link to fiddle My dilemma is that the red div (div1) shifts around within div2, and I would like div1 to disa ...
My content div is not pushing my footer down like I want it to. When I add more text, it just overlaps the footer. I need help with the CSS code that will fix this issue. I considered using overflow: scroll;, but I prefer the webpage to expand vertically ...
I have designed a vertical menu with multiple sub menus. Each menu contains at least 3 sub menus, and the sub menus are set to open only when their parent menu is clicked. (I require jQuery support for this menu) However, since I do not use jQuery on any o ...