Troubleshooting problems with spacing in CSS flexbox due to the gap property

Having some trouble with flexbox. The gap property is making the columns too wide when trying to create a simple 3 column row.

I was under the impression that the gap value should not affect the width set. For example, using flex: 0 1 33.33% and gap 2rem should adjust the width automatically, right?

If anyone has any solutions for this issue, I would greatly appreciate it!

Here is an example - https://codepen.io/CodePlanB1234/pen/WNMypqR

  <div class="row projects--wrapper">
        <div class="card-project--card col-4-12">
          <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>

        </div>
        <div class="card-project--card col-4-12">
          <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>

        </div> 
        <!-- additional cards go here -->
    </div>
cssflexboxgrid

Answer №1

Utilizing the calc function can help adjust column width within a flex container by accounting for gaps. In this scenario, there are 4 columns in each row, resulting in 3 gap columns. By setting the gap as a variable, it allows for easy customization of the gap size.

Here is the breakdown:

Formula for calculating width with flex item and gap

W = 100%/NC - G/NC*NC-1

NC = number of columns on the same row

G = specified gap range

Width = (100% of row width / NC) - (G / NC * NC-1)

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

.gap {
  --gap: 1em;
  gap: var(--gap);
}

.item-four-col {
  width: calc(100% / 4 - calc(var(--gap)/4*3));
  background-color: red;
}
<div class="flex gap">
  <div class="item-four-col">1</div>
  <div class="item-four-col">2</div>
  <div class="item-four-col">3</div>
  <div class="item-four-col">4</div>
  <div class="item-four-col">5</div>
  <div class="item-four-col">6</div>
</div>

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

Unable to interact with menu in Internet Explorer

I am facing an issue with my code that should create a dropdown menu when hovered on, but it is not working properly in Internet Explorer. Instead of dropping down the menu, IE pushes it to the right, making it impossible to interact with. Surprisingly, th ...

htmlcssdrop-down-menu

Using single-line ellipsis with the Material-UI select and option components

I have a TableHead Component with multiple columns. Among them is a <Select> element that allows users to filter the table content based on one of four statuses. I am trying to implement an ellipsis at the end of the option string if it exceeds its c ...

cssreactjsmaterial-ui

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

javascripthtmlcss

Include a carrot icon on a navigation element that is currently active, ensuring it does not disrupt the position of the navigation icon within the container

I am working on a react navigation bar where I want to emphasize each navigation item with a carat when the user is on a specific URL or route. I have been trying to use the :after pseudo-class in Sass to add the carat, but it's not working as expecte ...

htmlcssreactjssassnavigation

Styling the checked state of a switch in NativeScript/Angular with ngModel/FormBuilder

Let's explore the styling of a switch element within Angular: <Switch class="switch" formControlName="answer"></Switch> One approach involves targeting the switch with checked attribute, setting its background-color and text color accord ...

cssangularnativescriptnativescript-angular

What steps should be taken to enlarge a checkbox within a table?

I need help with resizing the checkboxes that are inside a table. When I try using width:###px; height:###px;, it only seems to make them smaller, not bigger. Even when I set the values higher than the default size, the checkboxes stay the same while the d ...

htmlcsscheckboxhtml-tableresize

What are some effective methods for dynamically styling elements during iteration?

Need assistance with styling dynamic elements during iteration Located on the test.phtml page <?php foreach($tests => $test) { ?> <li class="<?php echo $test['class'] ?>"> <a href="#" title=""> Test In ...

htmlcssiteration

Pictures fail to load on Safari browser for desktop and iPhone, yet display correctly on various other smartphones and Windows browsers

Having trouble with images not displaying on Safari browsers for Mac and iPhones, but they load fine on Windows and Android. Even after updating to the latest version of Bootstrap, the issue persists. Here are the current Bootstrap content delivery networ ...

htmlcssiosbootstrap-4safari

The addClass and removeClass functions in jQuery are functioning properly only on Firefox browser

Could someone help me understand why this code works in Firefox but not in Safari or Chrome? The variable newClass retrieves the value from a select box, which is then used to create a selector for adding or removing classes using addClass/removeClass. I ...

jqueryhtmlcss

Tips for adjusting the scrollbar in Tailwind (next.js/react)

Having trouble changing the appearance of my scrollbar in a single page application using Tailwind (react/next). I've attempted to create custom CSS for the first div in my index file, like so: <div className="no-scroll"> <<< ...

cssreactjsnext.jstailwind-css

Steps to turn off fancybox for mobile and show the full image instead

In this scenario... I am seeking a way to deactivate fancybox functionality on mobile devices. I have already discovered one method to disable it... And now I want to directly show the large image in the a href="xxx_large.jpg" instead of using the img src= ...

javascriptjquerycssfancyboxfancybox-2

Displaying a large image within a small div using Bootstrap 4

I have a specific image with dimensions of 244px by 751px, and I am trying to place it inside a div container that is 132px by 132px. I want the image to maintain its aspect ratio without being stretched. Despite using the img-fluid class, the image does n ...

cssbootstrap-4

Tips for aligning all positioned elements in a div

I am trying to center absolute items inside my .child_div element with a green background. How can I do this properly? .parent_div { position: relative; background: lightgreen; width: 1200px; margin: auto; } .child_div { position: relative; ...

htmlcss

Tips for effectively closing div elements

How can I modify this accordion to close when a user clicks on another link, and also change the image of the open "p" tag? Currently, clicking on a link toggles the content and changes the image. However, what I am struggling with is closing the previousl ...

javascriptjqueryhtmlcss

Choose a sibling element using CSS styling

As I'm developing an AngularJS component, I am on the quest to identify ANY sibling of a particular tag, irrespective of whether they are div, span, or p. I'm hoping for a CSS-native solution that resembles something along the lines of div:siblin ...

htmlcssangularjscss-selectors

Flex items in the center are getting truncated when viewed on a smaller screen size

I have a group of divs in my list, here's an example: .container { display: flex; flex-direction: row; justify-content: center; } When the container is larger than the viewport upon resizing, the first/second items get clipped off. I would like ...

htmlcssflexbox

Strange glitches and slow loading problems plaguing website. (GoDaddy)

TackEmporium.com Lately, I have been revamping my website, which was originally given to me by a friend. I have been making slight adjustments to update its appearance while keeping its classic look with enhanced resolution and cleaned-up HTML5 code. Rec ...

javascripthtmlcss

PHP - designate a separate folder for script and style resources

There seems to have been some discussion about this issue before, but I am struggling to find a solution. I want to add css, js, and asset files to my php framework. However, when calling these files, the path must always match the folder structure like t ...

javaphpcssassets

Having issues with ToggleClass and RemoveClass functionalities not functioning properly

As a novice in Jquery and CSS/scss, I've managed to create dynamic bootstrap cards for recording players. Each card consists of a music-container with control-play and vinyl elements. I aim to have multiple bootstrap cards generated based on the data ...

javascriptjqueryhtmlcssjquery-ui

Preventing Adjacent Text from Moving Due to a Floated i Element

I have a div with a bootstrap icon positioned at the top right corner. However, I want to center the text horizontally without shifting the position of the icon. Is there a way to achieve this? See my sample code here: https://jsfiddle.net/x1Lvyu6t/3/ ...

htmlcss