All Questions
Tagged with grid-layout flexbox
79
questions
568
votes
37
answers
334k
views
Flex-box: Align last row to grid
I have a simple flex-box layout with a container like:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
Now I want the items in the last row to be aligned with the ...
- 12.6k
251
votes
2
answers
373k
views
Equal height rows in CSS Grid Layout
I gather that this is impossible to achieve using Flexbox, as each row can only be the minimal height required to fit its elements, but can this be achieved using the newer CSS Grid?
To be clear, I ...
- 3,501
22
votes
2
answers
27k
views
Make a div span two rows in a grid
I have a page full of blocks which pile up with display: inline-block. I want to make some four or two times bigger, so I used float: left or right to put other blocks around.
My problem is if I have ...
- 1,428
17
votes
3
answers
44k
views
How can I make a div span multiple rows and columns in a grid?
Building off of a previous question, I'm trying to add bigger blocks to my grid layout. In the last question, I needed to have a div span multiple rows. The problem now is that I need a div to span ...
- 1,428
9
votes
1
answer
37k
views
Vuetify grid layout - How to fill height of element in grid
I'm trying to create a grid layout but am having trouble.
The layout I'm trying to create is attached in the image below. It's easier to show than explain.
A side panel card layout that will be ...
- 1,345
8
votes
4
answers
18k
views
Flexbox, responsive grid of square divs maintaining aspect ratio
I'm trying to create a 2x2 grid with divs. Some of the divs might contain an image, but it will probably be set as a background, with the option background-size: cover.
Here's the pen I created: http:...
- 4,096
8
votes
2
answers
4k
views
Make elements wrap in groups, not one by one
I have six inline, fixed-size elements and would like to wrap them so that each row has the same number of elements. So with a wide container, there would be 1 row with 6 columns / elements. As the ...
8
votes
1
answer
23k
views
Shrink grid items just like flex items in css
Is it possible to shrink grid items just like flex items in css?
Grid items
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
....
7
votes
2
answers
12k
views
CSS Grid Layout with Max-Width, Centered Content
I'm in the midst of learning CSS Grid (long overdue, I know). I've challenged myself to convert a relatively standard float-based layout to a grid, but can't figure out this last part.
My goal is to ...
- 61.2k
6
votes
4
answers
3k
views
Flex container with four divs, need three columns, second column with two rows
For a section on a page, I am trying to display two rectangular divs stacked up between two square divs on either side as big as the height of the two stacked divs, inside these divs are img tags.
I ...
- 2,393
6
votes
1
answer
2k
views
Expanding flex items to full width
I'm attempting to create a custom 'iTunes' style expanding layout. However, I am hitting a few issues. I had originally anticipated using flex-box for this. But I can't quite seem to do what I am ...
- 87
6
votes
1
answer
461
views
Grid layout - is this possible using flexbox?
I'm currently using the following grid-layout:
display: -ms-grid;
-ms-grid-columns: 400px 100px max-content 1fr 50px;
-ms-grid-rows: 1fr 1fr;
Which resembles this layout:
| <----------------- ...
- 9,831
5
votes
4
answers
16k
views
How to set a specific flexbox gap in CSS
I'm trying to achieve a flexbox layout with just one flex-grow element and a variable number of smaller elements around it. I need a gap between the elements that's a fixed width - exactly one pixel. ...
- 155
5
votes
2
answers
4k
views
Why does this Material-UI Grid item move when I click on it?
I am developing a React app using Material UI. I am having an issue with one page of the app.
That page contains some text and a button, which are vertically aligned with one another. It also ...
- 53
4
votes
1
answer
4k
views
Grid columns using flexbox with fixed size margin gutters
Is it possible to apply a fixed margin (e.g. 5px) to a cell in a flexbox layout, where the row space is evenly distributed among its columns?
Want I want to achieve:
My current CSS will only align 3 ...
- 3,148
4
votes
3
answers
3k
views
Create table-like grid with CSS starting from a simple HTML list
Is there any way in CSS to create this:
-----------------------------------
| lorem ipsum dolor | consectetur |
| sit amet | |
-----------------------------------
| adipiscing ...
- 41
3
votes
4
answers
167
views
Consecutive same color cells should be in same column, gridbox
In my current project I have huge number of sections, each section has one or two rows ranging from 2 to 15 columns, of equal widths. The same colour cells are placed in same column. The positioning ...
- 41.1k
3
votes
1
answer
2k
views
How to set up a dynamic grid based on flex or grid
I want to create a dynamic grid system that should behave like this:
first when there is only 1 item it should have a width and height of 100%.
When the second child has been dynamically added to the ...
- 830
3
votes
1
answer
3k
views
Grid layout with undefined number of columns
I have a HTML template:
<ul>
<li>1
<li>1
<li>22
<li>1
<li>1
<li>333
<li>1
<li>1
<li&...
- 97
3
votes
2
answers
2k
views
Responsive vertical HTML table
If I have a vertically defined table, with a title, like so:
https://codepen.io/Slagon/pen/YzGbgza
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading ...
- 702
3
votes
3
answers
1k
views
Evenly sized columns between rows using grid/flex
Consider the following snippet:
#container{
border: solid 1px black;
display: inline-grid;
grid-template-columns: repeat(3, auto);
}
<div id="container">
<div class="row"&...
- 51
3
votes
1
answer
100
views
three/four column list with pop-up description below each item
I have a list of items, with each item having a (fixed size) thumbnail image and some more data. The list should now be displayed in a three/four/X column layout, with the thumbnail images being ...
- 1,502
3
votes
0
answers
2k
views
CSS - how to make flexbox with wrapping have width of content?
Initial problem
I have a flexbox on my page with boxy items that should be aligned in a grid in the center of the page. To achieve this, I used justify-content: center; and it kind of worked but had ...
- 501
3
votes
0
answers
56
views
Get a layout with items with different heights in a single row using flexbox [duplicate]
I have been trying to get this going row-wise using flexbox. But as I have been researching, I guess I can't get it using flexbox. I have come across some answers that are suggesting to use the grid ...
- 2,528
3
votes
1
answer
2k
views
Flexbox children in Safari wider than supposed to be
See this pen:
https://codepen.io/armandsdz/pen/xqGaoe
I have a simple Foundation grid and I set display:flex to "row" element in order to get all columns be the same height.
It all works fine in ...
- 31
3
votes
0
answers
143
views
CSS Flexbox layout: filling gaps [duplicate]
This is my first time on Stack Overflow. I am new to web design, and have been trying to figure out how to use flexbox in CSS by trying to design a Windows 10-style start menu, made up of a grid of ...
- 53
2
votes
1
answer
4k
views
justify-content works differently in Flex and Grid layouts
I'm wondering why using justify-content
the grid item takes the whole space
available instead of that used in the grid.
With justify-content:
https://codepen.io/whisher/pen/JOpYdp
Without:
https://...
- 32k
2
votes
2
answers
110
views
complex flexbox layout with scrollable containers [duplicate]
I have a complex flexbox based layout for my web-app which has several fixed and scrollable containers.
This ist how it should look like:
The whole layout is 100% height and width and expands ...
- 77
2
votes
2
answers
256
views
News list multi-columns layout using Grids or Flexbox
INTRO
I'd need to implement a layout such the following one to list "Last News" items.
I recieve a list of equal items (for example .card DIVs ) and eventually I could limit the total to a ...
- 5,616
2
votes
0
answers
2k
views
Control div height using Bulma CSS column
In order to have a responsive page, I use Bulma CSS column (based on CSS flexbox) which:
Split my page on two equals width columns on desktop.
Stack the two full width columns on mobile.
On the left ...
- 1,019
2
votes
2
answers
2k
views
How to apply LayoutData to elements in a FlexBox?
I have a Label, Input field, Button and 3 Link controls which have to appear in-line on desktop and one below the other on mobile screen, as shown in the pictures below.
Desktop:
Expected Mobile:
I ...
- 331
1
vote
2
answers
103
views
How do I center an element when possible without overlapping the sidebar?
Here's what I want to achieve. There's a red sidebar on the left, width fixed with 160px. Meanwhile I want to keep the blue box in the center of the page if possible, with the maximum width of 240px.
...
- 19k
1
vote
1
answer
2k
views
Using flexbox to position unknown number of elements in a grid with min width per element
I am looping through a bunch of objects using Express handlebars and I need to positions them in a grid. However I do not know when to make a new row so I don't think I can use a table.
I basically ...
- 2,866
1
vote
1
answer
126
views
How to strech the grid items in a Cartesian plane made with Bootstrap4 and Flex?
I need to implement a cartesian plane with Bootstrap 4 and Flex. The desired output is something like the following image:
The plane is composed by a 10x10 matrix. Moreover I need a row containing ...
- 794
1
vote
1
answer
510
views
Why is an element pushed out of view by background image?
I'm making a horizontal scrolling site and encountering an issue where, when using flexbox, my content is pushed out of the page by my background image. Please see my pen:
https://codepen.io/anon/pen/...
user6506263
1
vote
4
answers
74
views
How to wrap a div and a img in a display:flex container
EDIT: You need to run the snippet in fullscreen.
I have a display: flex container with div element and other with img inside of it , both of them with 50% width. I want them when resizing below 800px ...
- 55
1
vote
1
answer
362
views
Equivalent of display:flex and justify-content: center in GRID [duplicate]
I have a div with n (can be different number) children. I want to display them in one row and center horizontally.
In flex, I would do:
display: flex;
justify-content: center;
How is it possible to ...
- 654
1
vote
0
answers
24
views
CSS grid set each cell size to its content's height [duplicate]
Hi iam trying to achieve this kind of stlye ->
But my code keeps the card rows seperted. meaning the row is taking its biggest elements height and putting it in all of its cells. so i get this ...
1
vote
0
answers
63
views
Is it possible to dynamically arrange card items to the top?
var size = document.getElementsByClassName("info-box");
for (const key in size) {
if (size.hasOwnProperty(key)) {
const element = size[key];
element.addEventListener('click', (...
- 108
1
vote
0
answers
239
views
How to build a column-based layout of expandable cards (spanning over two columns in <=tablet)? HTML, CSS, jQuery
I'm trying to create a layout as follows:
Desktop - no cards expanded:
Desktop - max one card expanded at a time:
Tablet and smaller - no cards expanded:
Tablet and smaller - max one card expanded ...
1
vote
0
answers
35
views
Is there a way to increase the height of a div when using flex? [duplicate]
I have a grid layout of 8 divs. I am trying to increase the height of the 5th div and decrease the height of the 8th div. Every way I have tried I get a big gap. I haven't used masonry isotope ...
- 317
1
vote
1
answer
975
views
How to set all css-grid (or flex) elements same size?
I'm trying to create a new rich text editor for my web application (student budget), and everything else works fine except the grid/flex layout when trying to set all the buttons to the same size.
...
- 187
1
vote
1
answer
2k
views
How to use nested grids in Bootstrap 4 with flexbox
I'm using Bootstrap 4 CSS with flexbox and I'm having issues with nested grids. Nesting grids works as expected in Bootstrap 4 without flexbox, but when flexbox is used elements stack instead of ...
- 13
0
votes
1
answer
2k
views
How to make a docked list with sticky items on top in HTML?
I am building a single page webapp using Vue/Vuetify. In one of my views I'm trying to create a list (v-list) of items on the right side of the page. The list can be longer than the page height so a ...
- 3,577
0
votes
3
answers
1k
views
CSS Grid with variable height to make it work like masonry layout
I'm trying to create masonry layout using css grid layout. All items in grid have variable heights. The items in the next row should stack to available space of the items in the previous row. i tried ...
- 223
0
votes
1
answer
670
views
CSS grid layout with equal height rows, where the shortest cell sets the height for all rows? [duplicate]
Like the title says, I'm trying to create a 2 column grid where the smaller cell sets the height of both columns. Is this achievable with css?
- 113
0
votes
2
answers
77
views
I am using flexbox to create my layout, however, I can't properly position the elements on my last row. Can I recreate the same layout with grid?
I have a flex container with a width that is not fixed and a bunch of children inside of it with fixed width. I've set flex-wrap to wrap and justify-content to space-evenly. This works fine and dandy ...
- 5,448
0
votes
1
answer
4k
views
Adjusting spacing between Flexbox items in IE while using Grid Layout for other browsers
Given that IE doesn't fully support Grid Layout, I'm using Flexbox for Internet Explorer only, and using Grid Layout for other browsers.
Is there a way to add margin/padding to flex items on IE only, ...
- 103
0
votes
1
answer
32
views
Bootstrap Grid - issue getting desired spacing/padding between text and images within divs
I'm trying to create a simple bootstrap grid with some data results. The spacing the first header (web-based review) and reported text (e.g., 211 -> new line "total projects identified) is ...
0
votes
1
answer
100
views
Flex/Grid headings have too much height [duplicate]
I have a list of products which I am listing using flexbox. Every flex item has a heading, description and stock status (image too, but it's not necessary in this example).
My problem is that ...
