Having trouble creating a customized 2 by 2 grid using flexbox at the moment.
Here is my goal: https://i.sstatic.net/uiGOD.png
The height of 1 and 2 should be smaller than 3 and 4.
And the width of 1 and 3 should be wider than 2 and 4.
I attempted to achieve this in the following Fiddle, but it's not working as intended. Any assistance would be greatly appreciated. https://jsfiddle.net/jewcvLs5/1/
Flexbox lacks native support for this feature, requiring additional "row" wrappers.
* {
box-sizing: border-box;
}
.parent {
width: 80%;
background: #c0ffee;
border: 1px solid grey;
display: flex;
flex-wrap: wrap;
margin: 1em auto;
}
.row {
flex: 0 0 100%;
display: flex;
}
.child {
border: 1px solid green;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
order: 1;
}
.child:first-child {
background: pink;
flex: 1 0 66.6666%;
}
.child:nth-child(2) {
background: red;
flex: 1 0 33.333%;
}
.first .child:first-child {
height: 75px;
}
.second .child:first-child {
height: 150px;
}
@media (max-width: 600px) {
.row {
display: contents;
}
.parent {
flex-direction: column;
}
.child:nth-child(2) {
order: 2;
}
}<div class="parent">
<div class="row first">
<div class="child">1</div>
<div class="child">2</div>
</div>
<div class="row second">
<div class="child">3</div>
<div class="child">4</div>
</div>
</div>However, this approach can be problematic when trying to re-order the children within wrapped rows at specific breakpoints.
A new CSS property, contents, has been introduced which allows for removing the wrapper's effect on elements. Learn more about it here.
Currently, only Firefox (version 37+) supports this feature as of the time of writing, but I am providing this example (and a Codepen) for future reference.
#wrapper {
display: flex;
flex-flow: row wrap;
}
#wrapper .one,
#wrapper .three {
flex: 100 0 34%;
}
#wrapper .two,
#wrapper .four {
flex: 1 0 34%;
}
.one::before {
content: "";
float: left;
padding-top: 10%;
}
.three::before {
content: "";
float: left;
padding-top: 30%;
}
/*properties below are just for cosmetics*/
.one {
background: violet;
}
.two {
background: orange;
}
.three {
background: limegreen;
}
.four {
background: dodgerblue;
}
#wrapper {
border: 2px solid gray;
}
.one::before {
border: 2px solid maroon;
}
.three::before {
border: 2px solid navy;
}<div id='wrapper'>
<div class='one'></div>
<div class='two'></div>
<div class='three'></div>
<div class='four'></div>
</div>We aim to arrange the flexboxes in two rows, utilizing the flex and row wrap properties on the wrapper.
Since the flex-basis is set at 34%, only two items can fit on a single line. The first and third divs have a higher flex-grow value, allowing them to occupy most of the remaining space. As a result, the first "column" appears approximately twice as wide as the second "column".
To ensure consistent row heights, we employ a pseudo-element on the first and third divs. Vertical margins and paddings are determined by the parent's width. By setting the width of the pseudo-element on the first and third divs to be three times larger, the second "row" can be made three times higher compared to the first row.
I've been trying to extract text between two specific <p> tags in HTML, but my code is only returning the text between a single tag. Here's what I have so far: > var myHTMLString = try String(contentsOf: myURL, encoding: .as ...
Can anyone assist with making each of these inline? https://i.sstatic.net/YF9bu.png <div class="atc_nsv"> <ul> <li><img class="ad lazyloaded" data-src="//cdn.shopif ...
I am trying to create a range input with a dynamic background color that changes as the slider is moved. Currently, the background is blue but I want it to start as red and transition to yellow and then green as the slider moves to the right. Does anyone ...
So I have a question that may seem silly, but it's worth asking. I'm attempting to create a sticky div element that stays in place when you scroll past a certain point on the page. This is the script I have: <script type="text/javascript"> ...
It seems like a simple issue, but I just can't get the background to cover the entire screen. Even though I have provided the code I used, only a quarter of the top of the screen appears black when wrapping something in the component. Here is the cod ...
I'm struggling with formatting a <span> tag, specifically the .lastMessageLink class that contains an <a> element with the .lastMessageText class. The content within .lastMessageText can vary from just a few characters to a lengthy paragra ...
I encountered a significant challenge while delving into CSS animation. My goal is to create a "transform: translate" animation that displays text overflowing the content width as depicted in the image below. https://i.stack.imgur.com/sRF6C.png See it i ...
Source Code Repository: https://github.com/qcaodigital/cocktail_curations Live Site: I recently deployed my NextJS project to Netlify and everything seems to be working fine, except for one issue. Each page has an exit animation (currently set to change ...
Is there a way to show varying HTML elements or components depending on the device size? In React, you can utilize a package called react-responsive. However, in Next.js, when using this package in a component, server-side rendering does not occur on tha ...
I'm new to web development and I'm exploring the concept of white space at the top of a webpage. Here is a snippet of my code: HTML: <div> <p>lorem ipsum</P> </div> CSS: div { background-color: black; } I attem ...
I need guidance on how to store the content from the tinymce editor and post it with a new page creation. What steps should I take? ...
As I immerse myself in learning Javascript and Canvas, the plethora of resources available has left me feeling a bit overwhelmed. Currently, I am working on a dress customization project using Canvas. // Here is a snippet of my HTML code <input type=" ...
I am struggling to create a table in HTML Click here for image Here is the code I have tried: <table> <tr> <th class="blue" colspan="3">3</th> <th class="orange " rowspan="2">2</th> <th class="blu ...
Looking for assistance! I am encountering an issue with using jQuery on Bootstrap. The accordion feature is not functioning correctly as it fails to collapse when another section is selected. https://i.stack.imgur.com/uiZPh.png The problem arises when th ...
While browsing the web, I came across a website with a strange red blob in the URL. It's something I've never seen before. What could possibly be the reason for this unique feature?! Note that you have to visit the page to see it for yourself. T ...
Experimenting with something and created the top section of the site (Logo and menu). However, when I tried to add a table with text, it doesn't appear in the browser preview even though I can see it in the CODE and DESIGN tabs of Dreamweaver. I susp ...
I have encountered an unusual issue in Internet Explorer involving a CSS Overlay used for a lightbox. The problem arises when I apply the fadein and fadeout effects using jQuery - everything seems to work smoothly except in IE. Instead of displaying a smo ...
Would appreciate some assistance on creating a vertical text with HTML similar to the example in the linked screenshot. It needs to be straightforward and vertically oriented. Check out the screenshot for reference ...
As a last resort, I am seeking a quick and simple fix. I have been experimenting with Javascript to implement a 'Read more...' & '... Read Less' feature on six different sections of a single page. The goal is to display only the fi ...
I have been attempting to prevent the back button from functioning in a specific Browser, Microsoft Bing. Interestingly, my code works only if I click somewhere in the window first. If I don't click anywhere and try to go back directly, it still allow ...