setting the width to 1fr, the grid will automatically flow in columns

Can I set column width to 1fr with grid-auto-flow: column?

grid-template-columns: repeat(4, 1fr)

I want all columns to have the same width, based on the widest column, but so far I can only do it by specifying the number of columns:

https://i.sstatic.net/wZ6e3.png

grid-auto-flow: column

I need to use grid-auto-flow: column because the number of columns may vary, and I want them all to have equal width without setting it in pixels:

https://i.sstatic.net/PWJCu.png

csscss-grid

Answer №1

Seeking the magic of grid-auto-columns: 1fr

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 5px;
  margin: 10px;
}

.grid>div {
  height: 50px;
  background: red;
}
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer №2

Utilizing the `auto-fill` and `auto-fit` keywords in Grid can automate the process for you, based on what you are looking to achieve:

HTML

<div class="grid">
  <div>col1</div>
  <div>col2</div>
  <div>col3</div>
  <div>col4</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: auto;
  gap: 1rem;
}

.grid > div {
  background: red;
}

View the results at https://codepen.io/isaactfa/pen/zYWWKQK.

To gain a better understanding of the difference between `auto-fill` and `auto-fit`, check out Sara Soueidan's explanation here: https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/.

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

Transform the text upon hovering over the image, with the text positioned separate from the image

I'm looking for a solution where hovering over images in a grid area will change the text on the left side of the screen to display a predefined description of that image. I've been working on this problem for hours and would appreciate any help. ...

htmlcss

Getting the value of a CSS Variable from Radix UI Colors with Javascript/Typescript: A step-by-step guide

Currently, I am attempting to dynamically retrieve the Radix Colors values in JavaScript. The reason for this requirement is that I generate these colors based on user input, resulting in values that are variable. As a result, I cannot hardcode the values. ...

javascriptcssreactjstypescriptradix

upon reaching the conclusion of the animation without employing the .animate() method

I'm currently working on developing an iPad web application. The .animate() method doesn't meet the necessary speed requirements, so I've opted to utilize CSS for most of my transitions. How can I go about implementing html <div id="myG ...

jquerycssipad

Embedding a CSS class within the primary class selector

Can someone help me with this HTML challenge? <div class="span3"> <div class="abc">code for first div</div> <div class="abc">code for second div</div> </div> I'm trying to hide the first "abc" division within th ...

htmlcss

When hovering over one div, both it and another div should be displayed simultaneously. The second div should continue to be displayed even when hovered over

I am looking to keep another div displayed when hovering over it - in this example, it says "hello." The div I want to remain visible is not a child element of the main div where I initiate the hover event. document.write("<base href=\"" + docum ...

htmlcssangular

Ways to decrease the height of the navigation bar in Bootstrap version 4.1

Struggling to figure out how to decrease the height of the navbar in bootstrap v4.1. I want it to be specifically 24px tall; Thanks, Richard. ...

htmlcssbootstrap-4navbar

Implementing border-right leads to alignment problems

I'm currently working on creating a list with bootstrap-Accordion using react-bootstrap. I'm applying a background color and border left to the selected item. The problem I'm facing is: Whenever I activate a bar, the text shifts to the rig ...

javascriptcssreactjsbootstrap-4

What strategies can be employed to prevent the need for custom classes for each individual paragraph or list item in order to maintain consistent styles within a

Bootstrap typically removes default paragraph margins and list styles for a cleaner look. However, there may be cases where you want to maintain the default styles for paragraphs and lists within a section of user-generated content on a Bootstrap 5-styled ...

csstwitter-bootstrapbootstrap-5

Adapt a dynamic nested flexbox grid into a stacked layout optimized for mobile devices

Utilizing the power of the CSS3 Flexible Box layout has been crucial in developing a responsive site that caters to various devices. On desktop screens, I have successfully implemented a flexbox layout that looks like this: body { text-align: center; ...

htmlcsslayoutflexbox

Certain CSS classes are functioning properly, while others are not operating as expected

I am in the process of developing an ASP.Net page and utilizing Bootstrap, which has been functioning properly. Additionally, I have integrated a custom stylesheet to refine the appearance of the page. However, within the last couple of days, any new class ...

htmlcssasp.nettwitter-bootstrap

Create a series of vertical lines using jQuery

I'm dealing with a JSON data set that I want to use to generate a grid. In addition to the grid, I also need to display vertical lines above it based on certain values: var arr = []; arr= [ {"Measure":"Air Pollution","Rank":"1","Value":"15.5"}, ...

javascriptjquerycsskendo-ui

Exploring the implementation of toggling functionality for nested children within <li> elements using jQuery

Unable to get the toggle function working on child nodes. Can someone assist me with this issue? $(document).ready(function() { $('label.tree-toggler').click(function() { $(this).parent().children('ul.tree').toggle(300); }); ...

javascriptjqueryhtmlcss

Struggling to create horizontal buttons for my design

Does anyone have any suggestions for fixing my navigation bar? I attempted to create it myself, but I'm struggling to make everything function properly. https://i.stack.imgur.com/h4yA1.jpg Below are the images of the button in all three states: htt ...

cssbuttonnavigationrow

What is the best way to center-align the label of a TextField in React Material-UI horizontally?

I'm trying to center-align the label in this TextField: import React from "react"; import { withStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; export ...

cssreactjsmaterial-ui

Struggling with pinpointing the specific element

I'm struggling to select an element within a nested <ul>. In this code snippet, my goal is to pinpoint the <a> tag that follows the parent <li> <ul class="wc-block-product-categories-list wc-block-product-categories-list--dept ...

css

Images will only be displayed if the optional html parameter is included; otherwise, they will be hidden

In my parent component, there is an image displayed at a specific path (note: the image is already stored in my project). This path can optionally have additional parameters. If the For instance, The image is visible (image) when the HTML path is: ww ...

javascripthtmlcssimagereactjs

Shape with smoothed corners

Is there a way to create rectangles with rounded corners using CSS, SVG, or other methods while maintaining straight horizontal and vertical sides? I attempted to use border-radius for the rounded corners, but found that it created curved edges on both ho ...

htmlcsssvgcss-shapes

When CSS width:auto expands beyond its intended length

I'm experiencing an issue when I set the width to auto, the div expands to full length rather than adjusting to the width of the inner divs. Here is the HTML code: <div class="vidswraper"> <div> <div class="videoimage"> <img src ...

htmlcss

Modifying alignment of buttons in React components

Transforming the typical Tic Tac Toe game from the React tutorial, with an added one-player feature. Oddly, button alignment shifts out of place once a value is inserted; causing the button to drop by about 50px until the row is filled with values, after ...

javascriptcssreactjs

What is the best way to implement a secondary sticky navbar that appears on scroll of a specific section, positioned below the primary fixed-top navbar, using jQuery and Bootstrap 5?

I am facing a challenge with my webpage layout. I have a fixed-top navbar at the top, followed by 3 sections. The second section contains nav-tabs. What I want is for the nav-tabs navbar to stick to the top of the page below the fixed-top navbar when the u ...

javascripthtmljquerycssbootstrap-5