Create a Grid-Item-List with a custom arrangement, utilizing techniques like flex-box to achieve the desired layout

Question

Create a Grid-Item-List with a custom arrangement, utilizing techniques like flex-box to achieve the desired layout

Struggling to create a unique grid-list that looks great on both desktop and mobile devices. Any tips or solutions would be greatly appreciated!

I need a list (left image) with a special layout, which can be achieved through nested grids. However, I want to add a class to the list element wrapper for a different grid layout (right image). While I've tried working with flexbox, it seems like there may not be a CSS3 solution, leading me to consider using JavaScript. Before diving into the JS solution, I wanted to reach out and see if anyone has a better idea.

To help visualize my challenge, check out this image: https://i.sstatic.net/whswE.jpg

html list css grid flexbox

Answer 1

Answer №1

Here's a creative approach, experimenting with margins

.list {
  display: inline-flex;
  flex-wrap: wrap;
  width: 150px;
  border: solid 1px green;
  margin: 5px;
}

.item {
  width: 50px;
  height: 50px;
  box-shadow: inset 0px 0px 0px 1px blue;
}

.list:not(.first) .jumbo {
  width: 100px;
  height: 100px;
  margin-bottom: -100px;
}

.list:not(.first) .jumbo + .item {
  margin-right: 100px;  
}
.first .item:first-child {
  width: 150px;  
}

<div class="list">
  <div class="item">1</div>
  <div class="item jumbo">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div class="list first">
  <div class="item">1</div>
  <div class="item jumbo">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Answer 2

Here's a creative approach, experimenting with margins

.list {
  display: inline-flex;
  flex-wrap: wrap;
  width: 150px;
  border: solid 1px green;
  margin: 5px;
}

.item {
  width: 50px;
  height: 50px;
  box-shadow: inset 0px 0px 0px 1px blue;
}

.list:not(.first) .jumbo {
  width: 100px;
  height: 100px;
  margin-bottom: -100px;
}

.list:not(.first) .jumbo + .item {
  margin-right: 100px;  
}
.first .item:first-child {
  width: 150px;  
}

<div class="list">
  <div class="item">1</div>
  <div class="item jumbo">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div class="list first">
  <div class="item">1</div>
  <div class="item jumbo">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Create a Grid-Item-List with a custom arrangement, utilizing techniques like flex-box to achieve the desired layout

Answer №1

Similar questions

Identify and track colored dots within an image using tracking.js

Bypassing CSS rules for elements not present in the DOM

Achieving label center alignment within a Bootstrap 4 container

What is the preferred choice: using camelCase in CSS with Styled Components or Emotion for standard React development?

Javascript clock problem, kick off on click

How to Blend Pseudo-classes in CSS?

Setting the minimum and maximum width of the MenuItem (popover) in Material-UI based on the width of the select component

Transfer the value of a JavaScript variable to paste it into a fresh tab on Google Chrome

Using Google Fonts with AMP and Ruby on Rails: A Challenging Task

Choosing radio buttons within rows that contain two radio buttons using ngFor

Creating an HTML button that functions as a link to a specific section on the same page

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Turn off the ability for items in Isotope to be set to an absolute

Is there a glitch in Safari's CSS involving max-height?

Python's list comprehension allows for the generation of two values in a single iteration

Steps for encoding a CSV export with HTML:

A guide to programmatically downloading a file with JavaScript on Internet Explorer

Looking to utilize Python Selenium for downloading a PDF file

Encountering an unforeseen issue with my code

Using namespaces in Rails to encapsulate CSS styles