Ensure that the child element maintains equal height and width measurements within a row that is distinct

Is there a way to arrange 4 items inside a flex container in a 2 X 2 grid layout while ensuring that they all have the same width and height?

I've tried using flex-grow: 1;, but since the children are in different flex containers, they do not obey the rule. Placing them in the same container puts them in the same row, which is not what I want.

You can view the code on CodePen here: https://codepen.io/mongolhippie/pen/yLYQbVd?editors=1100

    .tile {
      display: flex;
    
      flex-direction: column;
      border: 2px solid #A97C50;
      border-radius: 20px;
      padding: 20px;
      margin: 25px;
      /* THESE 3 OPTIONS TO CONTROLL HAVING THE SAME SPACE FOR EVERY TILE */
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
      flex: 1;
    }
    
    .tile p {
      font-size: min(calc( 1.125vw + 1.2rem ), 3.9rem);
    }
    .flex-center{
        display: flex !important;
        justify-content: center !important;
        align-items: center;
    }
    
    .manual-link {
      text-decoration: none !important;
      color: var(--brown-dark);
    }
    
    .manual-link:hover {
      text-decoration: none !important;
      color: var(--brown-dark);
    }
    
    .icon-and-title{  
      display: flex;
      align-items: center;
    }
    
    .icon-and-title p{
      font-size: min(calc( 1.125vw + .9rem ), 3.9rem);
    }
    
    .icon-and-title img{
      max-width: 100%;
      height: auto;
      transition: all .3s;
      max-height: 80px;
      margin-right: 20px;
      margin-bottom: 10px;
    }
     <div class="flex-center">
          <a class="manual-link" href="/manuals/manual-it.pdf">
          <div class="tile">
            <div class="icon-and-title">
              <img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
              <p>ADMIN</p>
            </div>
            <div class="links-manuals">
              <p>For the administrator of the app</p>
            </div>
          </div>
          </a>
          <a class="manual-link" href="/manuals/manual-developers.pdf">
          <div class="tile">
            <div class="icon-and-title">
              <img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
              <p>DEVELOPERS</p>
            </div>
            <div class="links-manuals">
              <p>To upgrade the Code</p>
            </div>
          </div>
          </a>
    
    
        </div>
        <div class="flex-center">
          <a class="manual-link" href="/manuals/manual-design.pdf">
          <div class="tile">
            <div class="icon-and-title">
              <img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
              <p>DESIGNERS</p>
            </div>
            <div class="links-manuals">
              <p>Style guide</p>
            </div>
          </div>
          </a>
          <a class="manual-link" href="/manuals/ngo.pdf">
          <div class="tile">
            <div class="icon-and-title">
              <img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
              <p>NGOs</p>
            </div>
            <div class="links-manuals">
              <p>The project</p>
            </div>
          </div>
          </a>
        </div>

What's the secret to achieving a 2 X 2 disposition with equal dimensions for each item?

Thank you!

htmlcssflexbox

Answer №1

Transition smoothly from Flexbox to CSS Grid.

Make the following adjustment in your CSS:

.grid-layout{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

When working with a layout that spans across 2 different rows, modify the grid-template-columns property.

Using the fr unit instructs the grid to create two equal width cells.

Consider renaming the class from .flex-center to something more appropriate for CSS Grid implementation.

Check out the updated version on Codepen

Answer №2

Flexboxes are exceptional for creating flexible containers in one direction (either vertically or horizontally) and can also accommodate multiple lines when there is limited space for all elements (instead of overflowing the container).

HOWEVER, there is another display method primarily used for two-dimensional flexible grids, known as grid. You should refer to this guide to utilize it effectively.

If you prefer a default 2D (2x2) grid layout, it's much simpler to employ this basic grid structure where both columns and rows each occupy half of the available space (50%):

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}

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

Reduced complications with mixin scopes

I have developed a parametric mixin that utilizes a unique "node-value" system to locate the children of an element. The process involves detecting the children through a loop function named ".extractArrays", which contains ".deliverChild" within it. Subse ...

csslessfrontendmixins

Can you confirm if the explanation provided is accurate in distinguishing between inline and block-level elements in HTML?

The absence of the align attribute in the font tag is due to its status as an inline element. To center text, utilize the <center> tag instead. ...

htmlblockinline

How to retrieve the current event handler's value with jQuery

To assign an onclick event handler using jQuery, I simply use the following code: $('#id').click(function(){ console.log('click!'); }); Now, my question is how can I retrieve a reference to the function that is currently handling th ...

javascriptjqueryhtml

What is the best method for positioning span content above all other elements without having it wrap around them?

Each form element on my page is accompanied by a span that displays an error message, if applicable. The layout consists of two columns: left and right. I am struggling to make the span display seamlessly from the left column all the way across the page wi ...

htmlcss

``Only Firefox supports jQuery animations, all other browsers fail to render them properly

This particular issue is a bit complex to articulate, so I'll begin by providing the code and then proceed to elaborate on the problem as best as I can. I'm assuming that you've already compared the results in Firefox and other browsers. He ...

jquerycssjquery-animate

What could be causing the dropdown menu to be unresponsive in my HTML and CSS code?

I am struggling to figure out why my drop-down menu is not appearing on my website. Even after removing the 'hidden' property, it still doesn't look right when I hover over the 'servicios' tab. I can't seem to pinpoint the iss ...

htmlcss

Utilizing CSS, Javascript, and Jquery to Toggle a DIV's Visibility Based on Clicking Either of Two Images

Need help with showing and hiding divs based on image clicks. Have 2 images (Image_A and Image_B) and 2 hidden Divs (Div_A and Div_B). If Image_A is clicked, show Div_A. If Image_B is clicked, hide Div_A and show Div_B. This should work both ways, ensurin ...

javascriptjquerycss

How do I hide a dropdown menu when the selector's value changes in iOS6?

I'm currently developing a hybrid application using Worklight. When I tap on a select control, a native dropdown appears. However, when I choose an option and the onchange event is triggered, the dropdown doesn't disappear unless I tap on the do ...

javascriptjqueryioshtmlibm-mobilefirst

The counter variable does not function properly within a setInterval function

I have encountered an issue with my scroll-counter variable inside the setInterval function. It increments by 1 each time the setInterval function runs, which is supposed to happen 20 times before stopping. However, I noticed that the value of this variabl ...

javascriptjqueryhtml

JavaScript and CSS failing to implement lazy loading with fade-in effect

Is there a way to add the fade-in animation to an image when it is loaded with JavaScript or CSS? Currently, the code I have only fades in the image once it is 25% visible in the viewport. How can I modify it to include the fade effect upon image load? ...

javascriptcss

JQuery does not immediately update the input value

I'm working on a jQuery placeholder that mimics the behavior of default placeholders in Chrome and Firefox for browsers that don't support it. However, I'm facing an issue where the placeholder div's HTML doesn't change as quickly ...

javascriptjqueryhtmlplaceholder

What is the best way to seamlessly transition from responsive design to mobile design?

While developing a single-page app, I encountered an issue with the layout when the screen width reaches a specific point. On narrow screens, I prefer to utilize the full width, but for wider screens, I want to limit the width for better readability. The l ...

htmlcsssafari

Is it possible for me to load a window following a click

I developed a customized Modal Box that functions similar to the browser's "alert()". When using the traditional alert(), it halts the rendering and executions of the underlying webpage. I am seeking methods to achieve this same behavior: preventing ...

javascriptjqueryhtmldom

Effortlessly find data in an HTML table and showcase the results instantly without

I am looking for a way to implement search functionality in my table without refreshing the page. The fields above the table are used for searching and I want the results to be displayed within the same table. Here is an example of the code: <?php $for ...

javascriptphpjqueryhtmlcss

Empty space encompassing the entire sheet

While developing my website, everything seemed normal until I added a CSS document to my HTML page. Now, when we open the website , there is a white space around the entire page. I attempted to set the body class to container-fluid since I am using Bootst ...

htmlcssbootstrap-5

When I try to add more content to my page, it doesn't extend beyond a single page and instead gets compacted together

As a beginner in the world of coding, my goal is to create a time management website specifically tailored for school use. Despite copying this code multiple times, I have encountered an issue where it does not continue down the page, and I am unsure of th ...

javascripthtmlcssbuttoninput

The Fullpage.js embedded in an iframe is experiencing difficulty scrolling on iOS mobile devices

Trying to use Fullpage.js for a website with unique sections on different domains using full-screen iframes. However, encountering issues with scrolling on IOS mobile devices. The first solution rendered the page completely unscrollable: <iframe src=" ...

htmlioscssiframefullpage.js

Guide to positioning Navigation Bar in the center

I'm currently in the process of updating my website, but I've encountered a problem that I can't seem to solve. The issue revolves around the positioning of my navigation bar. Currently, it is situated below some JavaScript content and on t ...

htmlcss

I am experiencing issues with the visibility of my background on certain mobile browsers

Apologies for repeating a similar question, but I've already tried the solutions mentioned in other posts. On my webpage, I have a table with a background image set using CSS. html { width:100% height: 100%; margin: 0px; padding: 0px; border: none; } ...

htmlcssmobile

Unable to display tags with /xoxco/jQuery-Tags-Input

I'm experimenting with the tagsinput plugin in a textarea located within a div that is loaded using the jquery dialog plugin. The specific plugin I am using is /xoxco/jQuery-Tags-Input. After checking that the textarea element is ready, I noticed th ...

javascriptjqueryhtmljquery-tags-input