<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
I want to arrange the elements as shown in the image, without wrapping the 1st and 2nd blocks in an extra div. Is there a way to accomplish this? I require this functionality so that I can easily change the element order using the 'order' CSS property at a later time.
I've been unable to find a solution to this issue.
You might want to consider utilizing CSS Grid to tackle this task:
<div class="parent">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
width: 500px;
height: 200px;
}
.div1, .div2, .div3, .div4 {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255,0,0,0.5);
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3 { grid-area: 1 / 2 / 3 / 4; }
.div4 { grid-area: 1 / 4 / 3 / 6; }
Considering the feedback received, here is an alternative solution using flexbox. It may not be as effective on smaller screens, but you can experiment with it by using inline-flex.
Feel free to modify the CSS variables to adjust the size of the grid units and the gap between them.
<div class="parent">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
:root {
--gap: 5px;
--unitSize: 100px;
}
.parent {
display: inline-flex;
width: calc(var(--unitSize) * 5);
height: calc(var(--unitSize) * 2 + var(--gap) * 2);
gap: var(--gap);
flex-direction: column;
flex-wrap: wrap;
}
.div1, .div2, .div3, .div4 {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 0, 0, 0.5);
}
.div1, .div2 {
width: var(--unitSize);
height: calc(var(--unitSize) + var(--gap) / 2);
}
.div3, .div4 {
width: calc(var(--unitSize) * 2);
height: calc(var(--unitSize) * 2 + var(--gap) * 2);
}
I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to ...
Can someone help me figure out how to keep an element open when another one is opened? Here is an example: https://getbootstrap.com/docs/4.0/components/collapse/ <div id="exampleAccordion" data-children=".item"> <div class="item"> & ...
I have been using a custom CSS file along with bootstrap. Initially, I had my custom CSS written before the Bootstrap CSS. However, I recently discovered that it's recommended to include Bootstrap CSS first before any custom CSS. As a result, I'm ...
I ran my webpage through Google PageSpeed Insights and it keeps flagging an issue with render-blocking JavaScript and CSS in the above-the-fold content. The report indicates that there are 17 blocking scripts and 11 blocking CSS resources on the page. De ...
How can I retrieve the value of the second span and display it in an input field when a checkbox is checked? For example, if there are values like 500 in the first row and 200 in the second row, when the checkbox in the first row is ticked, the value of 50 ...
I am exploring a way to extract key value pairs from a CSS stylesheet related to a specific class or id into a JavaScript object for data accessibility. It is important to mention that I do not intend to apply this class directly to any DOM elements. In ...
I am currently developing this code for a SharePoint 2010 platform. While the table can currently be sorted alphabetically, I am looking to implement a different functionality. Unfortunately, I am facing an issue with changing variables 'a' and ...
Is there a way to pre-select an option in a combobox and have the ability to change the selection using TypeScript? I only have two options: "yes" or "no", and I would like to determine which one is selected by default. EDIT : This combobox is for allow ...
I am feeling overwhelmed by the concepts of IndexedDB and serviceworkers as I try to transform them into a functional application. Despite my extensive research, including studying various examples, I am struggling to integrate the two technologies effecti ...
When using openlayers (v4.6.4) with font-awesome as marker icons, the icons do not display upon first load (even after clearing cache and hard reload). Instead, I see a rectangle resembling a broken character. It is only on the second load that they appear ...
One feature I'm working on involves an input field within a form where users can update their name by clicking a button. The goal is to capture this change in the input field using Ajax and update it accordingly. Here's the HTML code snippet: & ...
I've been working on incorporating bootstrap login Modal functionality into my code, but for some reason, the screen is not displaying it. Here's what shows up on the screen: https://i.sstatic.net/UIU2w.png The red box in the image indicates whe ...
I have multiple forms within an ng-repeat loop, each with a different name. I need to pass the form data when a button inside the form is clicked. However, when I try to call it like this: checkSaveDisable(updateProductSale_{{productIndex}}) it thro ...
I am having an issue with my external style sheet named style.css. style.css #topbar { background-color: red; width: 1000px; height: 40px; } body{ background-color: green; } I have tried calling this style.css from the root folder, but it's not ...
I want to position a Bootstrap loading spinner on the right side of a ui li, with the text "Keywords" on the left side of the ui li. My current HTML code is as follows: <ul class="list-group" id="my-list"> <li class="l ...
I am currently experimenting with CSS grid to create a layout that changes based on different screen sizes. Here is what I want to achieve: On a mobile screen, there should be one column that takes up the entire width. This column consists of two sections ...
Hello everyone, I am currently working on developing a chat application using Django Version 3.8.1. I have encountered an error that is causing some issues for me. The specific task at hand is to create a view for private chat with a friend. views.py def ...
Is there a way to dynamically change the parent of a div element? Here is an example scenario: <body> <div id="div_a"> <div id="child"></div> </div> <div id="div_b"> </div> </body> I am looking ...
I am facing a challenge with designing a webpage that has a header with dynamic height and a content area. The goal is for the content to fill up the remaining space on the page, even if there isn't enough text. This is a common issue that many peopl ...
After setting a border color to my button, it's not displaying the color when I click on it. Instead, it's showing a different color. How can I resolve this issue? I need some assistance with setting the background of my button to match the imag ...