Maintaining Flexbox layout without triggering item re-rendering for a new container

Question

Maintaining Flexbox layout without triggering item re-rendering for a new container

This is the unique layout I'm aiming to create:

I am facing a challenging flexbox layout that needs to be implemented. One of the items in this layout is a Webgl player, which cannot be conditionally rendered due to the restarting issue it may cause. Each item should have the ability to occupy position 1 when clicked on. How would you approach coding this flex layout while considering that item 2 can only change its order, not its parent?

I experimented with making item 2 absolutely positioned but found it to be less than optimal.

javascript css reactjs flexbox

Answer 1

Answer №1

Here's a demonstration showcasing how to achieve your design objectives through css grid

const find = value => [...document.querySelectorAll(value)];

find("section").forEach(el => 
  el.addEventListener("click", () => {
    const isTwo = el.classList.contains("two");
    const isThree = el.classList.contains("three");
    const isFour = el.classList.contains("four");
    const isFive = el.classList.contains("five");
    const currentOne = find(".one")[0];
    if (isTwo) {
      el.classList.remove("two");
      currentOne.classList.add("two");
    }
    if (isThree) {
      el.classList.remove("three");
      currentOne.classList.add("three");
    }
    if (isFour) {
      el.classList.remove("four");
      currentOne.classList.add("four");
    }
    if (isFive) {
      el.classList.remove("five");
      currentOne.classList.add("five");
    }
    currentOne.classList.remove("one");
    el.classList.add("one");
  })
);

body {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  height: 100vh;
  margin: 0;
}

section {
  grid-column: span 2;
  display: grid;
  place-items: center;
  font-size: 18pt;
  transition: font-size 200ms;
  user-select: none;
  cursor: pointer;
  background: var(--color);
  order: var(--order);
  color: white;
  font-family: sans-serif;
}

.one {
  grid-column: span 4;
  grid-row: span 3;
  cursor: unset;
}

.four, .five {
  grid-column: span 1;
}

section:hover {
  font-size: 30pt;
}

.one { 
  --order: 1;
}
.two { 
  --order: 2;
}
.three { 
  --order: 3;
}
.four { 
  --order: 4;
}
.five { 
  --order: 5;
}

.red {
  --color: red;
}

.blue {
  --color: blue;
}

.green {
  --color: green;
}

.yellow {
  --color: yellow;
  color: black;
}

.purple {
  --color: purple;
}

<section class="one red">1</section>
<section class="two blue">2</section>
<section class="three green">3</section>
<section class="four yellow">4</section>
<section class="five purple">5</section>

Answer 2

Here's a demonstration showcasing how to achieve your design objectives through css grid

const find = value => [...document.querySelectorAll(value)];

find("section").forEach(el => 
  el.addEventListener("click", () => {
    const isTwo = el.classList.contains("two");
    const isThree = el.classList.contains("three");
    const isFour = el.classList.contains("four");
    const isFive = el.classList.contains("five");
    const currentOne = find(".one")[0];
    if (isTwo) {
      el.classList.remove("two");
      currentOne.classList.add("two");
    }
    if (isThree) {
      el.classList.remove("three");
      currentOne.classList.add("three");
    }
    if (isFour) {
      el.classList.remove("four");
      currentOne.classList.add("four");
    }
    if (isFive) {
      el.classList.remove("five");
      currentOne.classList.add("five");
    }
    currentOne.classList.remove("one");
    el.classList.add("one");
  })
);

body {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  height: 100vh;
  margin: 0;
}

section {
  grid-column: span 2;
  display: grid;
  place-items: center;
  font-size: 18pt;
  transition: font-size 200ms;
  user-select: none;
  cursor: pointer;
  background: var(--color);
  order: var(--order);
  color: white;
  font-family: sans-serif;
}

.one {
  grid-column: span 4;
  grid-row: span 3;
  cursor: unset;
}

.four, .five {
  grid-column: span 1;
}

section:hover {
  font-size: 30pt;
}

.one { 
  --order: 1;
}
.two { 
  --order: 2;
}
.three { 
  --order: 3;
}
.four { 
  --order: 4;
}
.five { 
  --order: 5;
}

.red {
  --color: red;
}

.blue {
  --color: blue;
}

.green {
  --color: green;
}

.yellow {
  --color: yellow;
  color: black;
}

.purple {
  --color: purple;
}

<section class="one red">1</section>
<section class="two blue">2</section>
<section class="three green">3</section>
<section class="four yellow">4</section>
<section class="five purple">5</section>

Maintaining Flexbox layout without triggering item re-rendering for a new container

Answer №1

Similar questions

Bring to the front the div altered by a CSS3 animation

I am in need of converting this code from a Class component to a functional component

iPad problem resolved: Disable click hover and double-click issue

Adjust the image size without losing sharpness

Guidelines for sending data as an array of objects in React

Implementing promise-based looping for multiple GET requests in node.js

Why does Axios keep timing out despite successful testing in Postman?

Automated resizing for various monitor dimensions in HTML

Image pop-ups that overlay text on the homepage

Using Vue.js to eliminate duplicate values from a filtered array of objects

When using addClass("test"), it throws an error message: TypeError: undefined is not a function

What is the best way to display the remaining items in an array when a user clicks the next button?

Update Json information within VueJsonCSV and VueJS component

Angular2: Issue encountered while processing click event

Issue with Bootstrap 5 navbar dropdown: It opens easily but struggles to close

Creating a consolidated HTML table by extracting and comparing data from various JSON files

Utilizing React and Google Code to Enhance Lead Conversion Pages

Hide the border below the active tab

The functionality of $watch in AngularJS is not meeting the desired outcomes

Clicking within the text activates the dropdown menu, but clicking outside the text does not