After testing CSS display: grid, I noticed that the grid-column-gap: 10px; property is causing the parent container to break. This makes the green area in my code smaller than the grid area itself.
It seems like box-sizing: border-box; doesn't have any effect. How can I ensure that both the grid area and the parent container have equal width?
/* ------------------------------- Resets --------------------------- */
...
Your current layout has your columns set to occupy 100% width of the container:
.gritts {
display: grid;
grid-template-columns: 15% 25% 35% 25%;
grid-column-gap: 10px;
}
This setup results in four columns, with three column gutters.
Each gutter receiving 10px causes an overflow issue, totaling 100% + 30px.
box-sizing: border-box won't solve this problem as it only affects certain properties (source).
Consider using one of these solutions instead:
grid-template-columns: 15% 25% calc(35% - 30px) 25%;
Another option is:
grid-template-columns: 15% 25% 1fr 25%;
Sorry for the delay, but this information is definitely valuable.
%When using % to calculate grid columns, it's important to consider gutters (gaps). You must add the pixel values of the gutters to the calculation. For example:
totalGridWidth = SUM(...%) + gutters = ~100% + guttersfrThis issue doesn't arise (except in case 3.) because it factors in the free space along with the gaps during calculation. The formula is as follows:
(free space - gutters) / 12 = 1frTo put it another way, utilizing the Least Common Divisor (LCD = 5%):
grid-template-columns: 3fr 5fr 7fr 5fr;minmax(0,Xfr)Typically, the browser layout engine uses a formula like minmax(auto,Xfr) to calculate Xfr. However, if items are expected to grow indefinitely (e.g. with width:100%), this can lead to overflowing grids. To avoid this, you should use minmax(0,Xfr) where X is the desired fraction.
In your specific scenario, this would translate to:
grid-template-columns: minmax(0,3fr) minmax(0,5fr) minmax(0,7fr) minmax(0,5fr);While this explanation may seem lengthy, it's crucial for preventing grid overflow issues in unique cases like yours. Using repeat() won't suffice, making this method foolproof against potential glitches.
For further insights, I recommend checking out this informative article:
It dawned on me that: <div class="clear"/> can wreak havoc on the layout after a sequence of floating divs, whereas <div class="clear"></div> works perfectly fine. Does anyone have an explanation for this? Here is the CSS being used ...
When working with material UI and reactjs, I encountered an issue while trying to override the button color without affecting the tab colors (see screenshot). How can I achieve this using themes in material UI? Code: const theme = createMuiTheme({ p ...
I am facing a challenge with displaying text and an icon together in a div. The requirement is for the icon to always be positioned right next to the text, even when the text wraps due to limited space. Various solutions have been attempted, but they all ...
Recently, I worked on a script (credit to Chyno Deluxe) that generates a list of menu items based on what is written in the input box. However, I now have a new requirement which involves generating a sequence of numbers to be added continuously. Here is ...
How can I create a div box with "id=secret" inside a post that is only visible to the author of the post? I initially made it for the admin, but now I want the id to be visible exclusively to the post's author. For instance: If the author is curren ...
It may sound a bit confusing at first, but essentially I have some dynamically generated HTML that resembles the following: <body> <div class="component" id="465a496s5498"> <div class="a-container"> <div class="random-div"> ...
Currently, I am developing a single-page application using AngularJS. I have specific routes in mind where I want to introduce new HTML templates. To accomplish this, I have created a container labeled with the ID #main positioned between two navbars (he ...
As I navigate through using a data scraper, I find myself in the realm of code where my knowledge is limited. The tool I am using is free but comes with its limitations such as a crawl limit and no option to resume from the endpoint. My goal is to scrape ...
Is there a way to trigger the playback of an mp3 file when the tab key is pressed on a keyboard? I am designing a number system for a restaurant where entering a number and pressing tab will result in a noise being played to bring attention to the numbers ...
Currently, I am working on a website located at . However, I am facing an issue where the font awesome icon is not loading properly and is only displaying a square. I have thoroughly reviewed the CSS and cannot identify any conflicting elements. Any assis ...
Question: Is it possible to dynamically set or change variables from JavaScript in post-css? I have a react component with CSS3 animations, and I want to set dynamic delays for each animation individually within each component. I've found a similar s ...
I have successfully implemented a body background image with full width following your previous questions and answers. However, I encountered an issue on Mozilla browser where the image is not scaling to full width. Here is the CSS code I am using: backgr ...
Recently, I developed a custom API using Node.js to retrieve information about blogs from Medium.com. The API currently provides: The author/main picture of the article Title A link to the article on medium.com (redundant) The entire article text in the ...
I would like to know if it is possible to flip the background image of a section that contains both a navbar and a row in Bootstrap 5. I am aware of using <<transform: scaleX(-1)>> but this flips all the container elements. Is there a way to ac ...
Presented with a fascinating challenge, I find myself with an ever-changing number of .child.red children. I am in need of referencing the last .child.red element dynamically using styles. Although I have attempted to achieve this on my own, I am curious a ...
My jquery script successfully loads an external HTML page into a div when tested on Chrome, but it's not functioning properly on Firefox. Here is the demo link. Could someone please explain why this code snippet is not working on Firefox? Code: &l ...
Hello everyone, Can you assist me with a query, please? My form works perfectly fine in desktop view, but it gets cut off on mobile view and I'm unsure of the reason why. Here is my code: .upload-pic { position: absolute; max-width: au ...
I am seeking to extract specific text from various forms of HTML code. Only the text within certain tags should be considered, and everything after those tags should be ignored. The structure of the HTML varies. <span class="classA">Text 1 ...
To all who contributed their time and effort in responding to my previous question, I offer my sincerest apologies. Initially, I had assumed that assistance wouldn't be forthcoming, so I started working on the issue myself. As a result, I have made si ...
While browsing the Atom forum, I stumbled upon a post discussing scripts for enhancing the UI of Atom. I'm curious about where to place these scripts. Should they go in the Atom init script? Any guidance would be highly valued. Visit this link for m ...