Suggestions for creating a simple implementation of a 3 x 3 cell layout with a large center using flexbox are

Creating a grid layout like this 3 x 3 cell with large center using CSS Grid is quite straightforward.

.container {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  grid-template-rows: 60px 1fr 60px;
}

But what if we wanted to achieve the same layout using flexbox? Is there a simple approach for that?

Check out this simple flexbox implementation for reference.

Answer №1

CSS Styling:


.container {
  width: 400px;
}

.item {
 background-color: white;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 0 12%;
  height: 30px;   /* (100-32*3)/2 */
}
.item:nth-child(2n) {
  background-color: gray;
}
.item:nth-child(2) {
  height: 50px;
  flex: 1 70%;
}
.item:nth-child(4) {
  height: 300px;
  flex: 0 12%;
}
.item:nth-child(6) {
  height: 300px;
  flex: 0 12%;
}
.item:nth-child(5) {
  flex: 1 70%;
}
.item:nth-child(8) {
  height: 50px;
  flex: 1 70%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it necessary for background images to be loaded on mobile devices within media queries in CSS3?

Assuming the following CSS: div {background: #000} @media (min-width: 1000px) { div {background: url(myimage.jpg)} } Would a smartphone with a width of 320px download the background image? Thank you! ...

Transitions fail to appear correctly when the page first loads

I need to fill a gauge meter based on a variable sent to the html file. To achieve this, I have initially set the value to zero: transform:rotate(.0turn); transition: all 1.3s ease-in-out; However, when the HTML is first loaded or refreshed (with F5 ...

Expand the image within the iron-image component

Within a div, I have an element: <div style="width:330px;"><iron-image src="image.png"></iron-image></div>. The image is 315px wide and 237px tall. I want the image to expand to 330px in width to fit its container without breaking t ...

Achieving the minimum width of a table column in Material-UI

Currently I am in the process of developing a React website with Material-UI. One query that has come up is whether it's feasible to adjust the column width of a table to perfectly fit the data, along with some extra padding on both ends? Outlined be ...

Ensure that the tooltip remains visible within the confines of the page

In my Angular application, I have successfully implemented a versatile tooltip feature that goes beyond just displaying text. The tooltip is a div element that has the ability to contain various contents: .tooltip-master { position: relative; .tooltip ...

Is it feasible to have fixed headers adopt the width property?

Is there a way to align the widths of table elements while maintaining a fixed header row? If the 'fixed' property is disabled, the width spaces correctly but the header won't stay fixed and will scroll out of the container div. Enabling the ...

The Bootstrap Dynamic Navbar is not adjusting for mobile devices because of the addition of a logo

Struggling to incorporate a logo into the navbar of my website. It looks good on larger screens, but causes the navbar to break on smaller screens. View without the logo: Click Here View with the logo and resizing issues: Click Here I think I can make th ...

Tips for positioning and styling submenu on dropdown using CSS

I am facing an issue with my navigation menu in the design. The sub menu is not displaying when hovered. Is there a solution to fix this problem? Could it be due to missing CSS styles? nav ul {list-style-type: none; overflow: hidden; background: #000; p ...

What could be causing the background image on my Jumbotron to fail to load?

Having some trouble with setting my image as the background of the Jumbotron. I've tried a few different approaches, but none seem to be working. It's not an issue with static loading because using img src directly into the Jumbotron section does ...

Issue with Slick Slider when expanding collapsible section in Bootstrap 4

Whenever I expand a bootstrap collapse that contains a carousel, only one carousel item appears instead of all. Is this a bug in Bootstrap or Slick Slider? https://i.sstatic.net/T7Orm.jpg Slider $('.remember__carousel').slick({ slidesToShow: ...

Utilize CSS Steps to incorporate the initial position

I'm experimenting with CSS steps to create a unique visual effect resembling a "light board". The setup involves a column of 18 divs acting as individual "bulbs", with an animation that positions a div behind each one to simulate a "lit up bulb." The ...

Align a child element to the top and another child element to the center within a flexbox column

Struggling with flexbox column and can't find a solution online! The problem: I have a full-height flex-column on the right side of my viewport with two elements (headset icon and hangup button). Trying to vertically align them - first element at top ...

The mixin 'media-breakpoint-only' is not defined

Recently, I decided to delve into coding with Bootstrap4 and Sass. I made sure all the necessary configurations were in place for my environment/project setup: including ruby 2.3.1p112 (2016-04-26 revision 54768) [i386-mingw32] and a list of installe ...

Include an additional icon without replacing the existing one on the mouse cursor

I am looking for a way to enhance the user experience by adding an icon that appears when hovering over an HTML element, serving as a subtle hint that the user can right-click. Instead of replacing the default cursor, which varies across platforms and doe ...

Transform a <ul> into an <ol> format (replacing bullets with numbers)

This question presents a challenge, but there may be a solution waiting to be uncovered. Presently, I am utilizing the Kendo UI panelbar for developing expandable lists. However, an issue surfaces when employing an <ol> as the sublist - in this scen ...

Is it necessary to alter the number of rows or columns in the table?

I'm having an issue with my code where the table is not changing the number of rows based on the selected input option. It seems to only read the first value of the select id and does not update the rows accordingly. Can someone help me identify the m ...

Repeating percentages displayed in a progress bar

I created a responsive progress bar, but the progress values are repeating. I only want the central value to be displayed. Any suggestions on how to fix this issue? DEMO <div id="tab1"> <dx-data-grid class="tableTask" [dataSource]="datas" ...

Generate Material UI sidebar components that are positioned above all other components

I am currently working on a sidebar component using the Material UI Drawer component. I am looking to add components that align side by side with the sidebar, similar to the green box shown in the image below. After attempting to code this, I ended up wi ...

Elevate a div over another div

I have a situation where I need to nest two divs inside another div with the ID "video-wrapper". Here is the HTML code: <div class="row"> <div class="video-wrapper col-lg-2"> <div class="video-thumbnail"> <img ...

To ensure a rectangular image is displayed as a square, adjust its side length to match the width of the parent div dynamically

How can I make the images inside my centered flexbox parent div, #con, be a square with side length equal to the width of the parent div? The image-containing div (.block) is positioned between two text divs (#info and #links). I want the images to be squa ...