Define the number of columns in CSS Grid and ensure that rows wrap accordingly

tag, I need to utilize CSS grid with 12 columns while ensuring that the tables stack in a column layout when the viewport size decreases. Is it possible to accomplish this using CSS grid? My research suggests that for row wrapping, I must use either 'auto-fill' or 'auto-fit'. However, if I opt for these options, I lose the ability to specify the exact number of columns as required. Below is an example of the CSS code snippet showcasing how the grid structure should be implemented:

table 1

table 2

table 3

css css-grid

Answer №1

You are unable to specify a fixed number of tracks using auto-fill or auto-fit.

§ 7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

If the grid container has a definite size or max size in the relevant axis, then when auto-fill or auto-fit is specified as the repetition number, the largest possible positive integer that does not cause overflow is used.

If any number of repetitions would cause overflow, only one repetition is allowed.

To achieve your desired layout within the limitations of CSS Grid Level 1, it is recommended to use flexbox (demo) or resort to traditional media queries despite their drawbacks.

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

Swiper.IO pagination indicators not displaying

Why is the pagination not showing up on the image carousel I created with Swiper? Despite being in the DOM, it has a height of 0 and manual changes have no effect. Any suggestions? import Swiper from '../../vendor/swiper.min.js'; export default ...

javascript css vue.js swiper.js

Clicking within the text activates the dropdown menu, but clicking outside the text does not

My custom drop down menu is not functioning properly. When I click on the text, it successfully links to another place, but when I click beside the text, it does not link. Can you please help me identify what's wrong here? Your assistance would be gre ...

javascript php jquery html css

Can you customize the "rem" values for individual Web Components when using Angular 2's ViewEncapsulation.Native feature?

I'm interested in creating a component with ViewEncapsulation.Native that utilizes Bootstrap 4 while others are using Bootstrap 3. Below is the component code with Bootstrap 4: import { Component, ViewEncapsulation } from '@angular/core'; i ...

css twitter-bootstrap angular web-component bootstrap-4

Alignment of a Definition List with Omissions of Definitions

Often, I come across applications with forms containing optional fields. In the Show view, these fields tend to "collapse" together and lose alignment with their corresponding labels. For instance, if I have 3 fields that should be displayed as: Phone: 3 ...

html css ruby-on-rails

Using the calc function to define input width may not yield the expected results

I am facing an issue where I have an input element with width: calc(100% - 100px); and no padding/margin/border. Next to this input, I want to place a div with position: inline-block; and width: 100px;. The problem is that the div is going to the next lin ...

html css css-position css-calc

The alignment of the images is off, with varying heights that do not match

My current issue involves images appearing in varying heights and the text underneath not aligning properly. Here is the markup: I have six row containers to showcase 6 different images. <div class="row"> <div class="posts"> <im ...

css image alignment height overflow

Is it possible to create a CSS design where alternating table rows have two different heights?

Looking to design a table where the height of every other row is approximately one-third of the preceding row. I've managed to style this with an inline method, but I'm curious if it's possible to create separate tags for different tr styles ...

html css html-table

Exploring the dynamic world of Angular2 animations paired with the

In my layout, I have a row with three columns and two buttons to toggle the visibility of the side panels: col-md-3 col-md-7 col-md-2 ------------------------------------ | | | | | left | middle panel | | ...

css twitter-bootstrap angular angular2-animation

How can I modify the color scheme of radio buttons to include a variety of different hues?

Is there a way to customize the colors of my radio buttons with three different options? I want numbers 1, 2, and 3 to be red, number 4 to be orange, and number 5 to be green... Here is the code I am using: /* Option 1 */ input[type='radio'] { ...

css

How to Programmatically Assign Bootstrap Class to an Element Using Angular 2

I am working on a page with several input boxes that need to be flagged for certain criteria. <div class="form-group"> <label class="d-block">Allowance Type</label> <div class="input-group"> ...

css twitter-bootstrap angular

What is the best way to reset the size of an element in webkit back to its original dimensions?

I am having an issue with an element that changes to display absolute and covers its parent element on focus via javascript. However, when it goes back to its default state on blur, it does not return to its original position. This problem seems to only o ...

javascript html css webkit

Conceal the div element when located beneath an ordered list with a designated

I need help hiding the display of comment information if it is a child comment. Below is my attempt to hide the div with the id "info" if the "ol" element has a class of "children". If you have another method for hiding the div when the comment is a chil ...

javascript jquery html css wordpress

Using Rowspan in Bootstrap 4 Beta 0 Grid System

Hey there, currently I'm working on an eCommerce template using Bootstrap 4 Beta. While I managed to get it working smoothly on mobile devices, I've run into a snag on desktop. I can't seem to figure out how to keep the Buy Box positioned un ...

html twitter-bootstrap css responsive-design bootstrap-4

How can I change the Safari blue outline to black?

I have an input field and I have applied the following CSS to it: input:active, input:focus { outline: 1px auto rgb(16, 16, 16) !important; outline-offset:0px; } However, when I tested it using , the input field still had a blue outline: I was hoping ...

html css safari

Changing the Input Label Color on Hover in Material-UI TextField

I have a custom styled Mui TextField called CustomTextField. It changes the input background color and font color on hover, but I also want to change the label font color when hovered over. Currently, the input background changes from black to white on hov ...

css reactjs material-ui

designing a responsive form in the mobile environment

I have implemented a search form on my website with a button inside the text box. It works fine on desktop, but when I switch to mobile view, the positioning is off. I am currently using absolute positioning for the button to give it a fixed position. Is t ...

html css twitter-bootstrap

Step-by-step guide on achieving a radiant glow effect using React Native

I am looking to add a glowing animation effect to both my button and image elements in React Native. Is there a specific animation technique or library that can help achieve this effect? While I have this CSS style for the glow effect, I am uncertain if ...

javascript css reactjs react-native css-animations

I am looking to modify the background color of characters in a text box once the characters in a textarea exceed 150 characters

Currently, I am utilizing event.data to capture the text inputted into this particular HTML textbox. My intention is to change the background color to red based on that input. However, when using the style attribute on event.data, I encounter an error. It& ...

javascript html css web

Only apply the CSS filter alpha to the parent element and not its children

I am working on implementing an alert message box using HTML and CSS. Below is the code I have so far: <div class="dim" id="msg"> <div class="dialog_wrapper"> <div class="dialog" id="msg_value"></div> ...

css filter alpha

Placing a pair of buttons on the border of a div container with the help of the bootstrap grid

Could you please assist me in making these two buttons stick to the edge of the div using bootstrap grid? If possible, could you also provide some explanation? I am currently trying to grasp how bootstrap grid works... Here is my progress so far: https:/ ...

html css bootstrap-4 bootstrap-grid

CSSer Q&A