Questions tagged [grid-layout]
Grid layout is used to align content into columns and fields. Unlike table layouts, grids are composed of guide lines so that elements positioned relative to the grid can have drag and drop behavior.
grid-layout
2,195
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
337
votes
3
answers
303k
views
Prevent content from expanding grid items
TL;DR: Is there anything like table-layout: fixed for CSS grids?
I tried to create a year-view calendar with a big 4x3 grid for the months and therein nested 7x6 grids for the days.
The calendar ...
- 14k
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
246
votes
1
answer
125k
views
GridView VS GridLayout in Android Apps
I have to use a Grid to implement Photo Browser in Android.
So, I would like to know the difference between GridView and GridLayout.
So that I shall choose the right one.
Currently I'm using ...
- 2,657
189
votes
5
answers
221k
views
Grid of responsive squares
I'm wondering how I would go about creating a layout with responsive squares. Each square would have vertically and horizontally aligned content. The specific example is displayed below...
- 12.2k
110
votes
4
answers
297k
views
How do I specify row heights in CSS Grid layout?
I have a CSS Grid Layout in which I want to make some (middle 3) rows stretch to their maximum size. I'm probably looking for a property similar to what flex-grow: 1 does with Flexbox but I can't seem ...
- 3,850
81
votes
1
answer
60k
views
Half columns in Twitter Bootstrap 3
I couldn't figure out how to make the bootstrap column like this:
col 3 | col 4.5 | col 4.5
- 1,103
76
votes
6
answers
51k
views
How to make the items in the last row consume remaining space in CSS Grid?
Is there a way to force all the items in the last row, of a grid, to fill the row, no matter how many they are?
I do not know the number of items that will be in the grid so I cannot target them ...
- 1,441
69
votes
9
answers
63k
views
Why is the Bootstrap grid layout preferable to an HTML table?
[Note: for those who may be confusing this question with "why not use tables for HTML layout", I am not asking that question. The question I'm asking is why is a grid layout fundamentally different ...
- 50k
57
votes
10
answers
37k
views
<Grid> in material ui causes horizontal scroll- React
I'm using Material-UI version 1. installed by this command:
npm install -S material-ui@next
Everytime I want to use , an unwanted horizontal scroll appears in the page.
Code:
import React from 'react'...
- 1,756
55
votes
7
answers
203k
views
How can I make Bootstrap 4 columns have a height of 100%?
how can I make a column take up 100% height of the browser w bootstrap 4?
See the following: https://codepen.io/johnpickly/pen/dRqxjV
Note the yellow div, I need this div/column to take up a height ...
- 2,240
51
votes
8
answers
23k
views
Left aligned last row in centered grid of elements
I have a bunch of same-size blocks set to display:inline-block inside a div that has text-align:center set to align the blocks.
| _____ _____ _____ _____ |
| | | | | ...
- 1,163
47
votes
3
answers
62k
views
CSS grid where one column shrinks to fit content, the other fills the remaning space
I need to create a horizontal layout where one block takes all available space and the other ones shrink to fit their content.
For example:
<div class="grid">
<div class="expand">...
- 12.6k
45
votes
2
answers
38k
views
Is it possible to place more than one element into a CSS-Grid-Cell without overlapping?
I have three columns and one row and I want to place each grid-element into one of the three resulting cells. This is what I want, using three container-elements:
main {
display: grid;
grid-...
- 553
43
votes
4
answers
59k
views
Make a <div> square when there is a dynamically changing width based on percentage [duplicate]
I am working on a web app that will generate an NxN grid based on the user's selection of N. I want the total width of the grid to be relative (ie 100% of the available space) so that users can print ...
- 2,047
40
votes
1
answer
81k
views
How can I make my columns different sizes using GridLayout in swing?
I'm using a GridLayout and my code is as follows:
int changingVar = 1;
JPanel panel = new JPanel(new GridLayout(changingVar, 2));
panel.add(new JButton("BUTTON1"));
panel.add(new JButton("BUTTON2"));...
- 12k
39
votes
7
answers
62k
views
Grid Layout Vs. Table Layout
I am working on a booking engine android app like an airline booking system. To fetch the content of say all the available airlines specific to a passenger search, this is then displayed on the mobile'...
- 1,046
38
votes
6
answers
43k
views
"Comparison method violates its general contract!" - TimSort and GridLayout
I made a color palette with a jPanel and a JLabel array in it. At first it worked well, but then i put some other jLabels out of the JPanel and added them some events. Now I keep getting this error:
...
- 12.9k
37
votes
6
answers
38k
views
Change the order of col-*-12 columns in Bootstrap using push/pull
I have two columns of the same size (.col-xs-12) and I would change their place when the screen size correspond to that of a mobile device. I would place them in the reverse order.
I have read that ...
- 13.8k
36
votes
3
answers
18k
views
A way to count columns in a responsive grid
Although I have not yet been able to find an answer, the question is simple: Is there a way, other than brute force, to count the number of columns in a responsive grid?
#grid-container {
width: ...
- 5,771
36
votes
3
answers
23k
views
Is there a RowSpan="All" in WPF?
I create a GridSplitter across the 3 rows that I have in my grid like this:
<GridSplitter Grid.Row="0" Grid.Column="1" Background="Yellow"
HorizontalAlignment="Stretch" ...
- 2,174
36
votes
6
answers
42k
views
Heterogeneous GridLayout
I am trying to implement the layout below:
I guess GridLayout is suitable for my needs but after 2 hours of struggle I couldn't create even a similar layout.. The layout is resizing itself wrongly, ...
- 9,956
34
votes
8
answers
68k
views
How to make a fixed column in CSS using CSS Grid Layout?
I've made a simple site with a #container div that is parent to two divs: #left and #right, by using Grid Layout:
Is there any way to make the left column fixed? I'd like the left text to persist on ...
- 426
34
votes
6
answers
63k
views
Set rowSpan or colSpan of a child of a GridLayout programmatically?
I have a GridLayout with 5 columns and 3 rows. Now I can insert arbitrary child views, which is great. Even better is, that I can assign columnSpan=2 to some item in order to span it to 2 columns (the ...
- 1,008
33
votes
3
answers
112k
views
min-width for column in Bootstrap grid system [duplicate]
I have following HTML with Bootstrap CSS.
<div class="row">
<div class="col-sm-4" style="min-width: 66px;">Name</div>
<div class="col-sm-1" style="min-width: 120px;">...
- 1,995
33
votes
2
answers
6k
views
Grid layout on <fieldset>... Bug on chrome?
From my decades-long experience of hand-coding HTMLs, I have learnt that <form>, <fieldset> are just block-level elements like <div>. CSS-wise, they behave just the same in terms of ...
- 1,096
30
votes
3
answers
81k
views
How to create a CSS Grid Layout box that spans 2 columns and 2 rows?
I've created a grid layout following the newest CSS Grid spec, but am not completely familiar with it yet. I'm trying to create the following layout without having to define grid areas for each grid ...
- 876
30
votes
3
answers
23k
views
Qt Designer - How to get a widget to span columns?
I created a simple form. I added a PushButton in the bottom right, and then a TabWidget above that. I highlighted the main window, and chose Grid Layout. The PushButton was stretched, so I added a ...
- 24.4k
30
votes
4
answers
18k
views
How is "grid-template-rows: auto auto 1fr auto" interpreted?
Recently, I created a layout using CSS grid. While this works well, I'm confused by how it works. Specifically, I'm confused about the line grid-template-rows: auto auto 1fr auto;.
What ended up ...
user8370684
29
votes
11
answers
8k
views
Wanted: CSS grid system AND collapsing margins
I think this is a tough one.
I use a grid system utilizing float:left. I could rewrite it with display:inline-block, but that would not change a thing.
Let's say we have two columns:
<div class=&...
- 33.1k
27
votes
2
answers
12k
views
What is an alternative to css subgrid?
I'm working on a page with a pretty simple layout - basically a data table, but using grid layout so that the columns will adjust nicely depending on content size. I want to make the rows sortable (...
- 597
27
votes
4
answers
8k
views
GridLayout spitting out "inconsistent constraint" debug-level logs
I've been using GridLayout for a few weeks now and I've noticed that when I call
gridLayout.requestLayout()
it spits out the following debug-level message in LogCat:
D/android.widget.GridLayout(...
- 2,012
26
votes
4
answers
32k
views
CSS grid: content to use free space but scroll when bigger
I've been working with CSS Grid Layouts for the first time and they're awesome. Right now, however, I'm having trouble keeping one of my grid cells under control.
What I want is to have an element ...
- 5,028
25
votes
5
answers
37k
views
android.support.v7.widget.GridLayout cannot get it to work
I have an android project which utilizes GridLayout in most of its menus and screens. The problem however is that GridLayout is supported from API 14 and onwards.
Since I want to make the ...
- 689
25
votes
3
answers
13k
views
Bootstrap 3 grid, does it *really* matter how many columns are in a row?
I have a form layout that has bootstrap 3 form groups on it. I want these form groups in a single column on < small, 2 columns on tablet size break and 4 column on larger screens.
I have it ...
- 3,998
25
votes
4
answers
101k
views
How to horizontally center a widget using grid()?
I am using grid() to place widgets in a tkinter window. I am trying to put a label on the horizontal center of a window and have it stay there, even if the window is resized. How could I go about ...
- 289
23
votes
4
answers
45k
views
CSS: display: grid and/or -ms-grid
Is there a way to use both or either display: grid/-ms-grid into one style sheet or do I have to use an HTML hack or JavaScript to query what type of browser a page is being viewed with grid layout?
...
- 415
22
votes
6
answers
2k
views
Which layout can do this?
I'm trying to layout some JLabels in my application as shown in this example:
I always have this JLabel at the middle and the number of the others JLabels is variable it can go from 1 to 30. I have ...
- 1,150
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
21
votes
10
answers
38k
views
Mosaic of images HTML/CSS
I want to make an image layout with portrait images inside a div with a fixed aspect ratio of 3:2. The size of images is 327x491px.
The main issue is unwanted spaces between images. How do I align ...
- 2,314
21
votes
3
answers
85k
views
How do I make a grid with Html and CSS with DIVS
I have all my divs necessary for my tic tac toe game, however I can't seem to find a simpler way to make a grid and not have any borders so it's just a grid and not 9 full squares... I think it's an ...
- 311
21
votes
2
answers
39k
views
Trying to have a grid of card with angular material
I have been trying to have a grid of card using angular-material. So I am using the directives md-grid-list and md-card. but the result is pretty ugly, and I am not sure to understand how the md-row-...
- 7,452
20
votes
6
answers
77k
views
How do we show the gridline in GridLayout?
How do we show the gridline in GridLayout? in Java?
JPanel panel = new JPanel(new GridLayout(10,10));
panel.setBorder(BorderFactory.createEmptyBorder(2,2,2,2));
for (int i =0; i<(10*10); i++){
...
- 15.5k
20
votes
4
answers
35k
views
More than 12 bootstrap columns with a horizontal scroll
I am trying to make a table using bootstrap grid system. I know that we should use only 12 columns per row. But I wanted to have more than 12 columns with a horizontal scroll for the entire table. So ...
- 1,302
19
votes
3
answers
21k
views
How to add android.support.v7.widget.GridLayout into intelliJidea?
I want to add GridLayout into my android project which is use support library GridLayout v7. I found this thread but maybe a few steps of adding this library did not mention in this paragraph Set up ...
- 1,023
19
votes
2
answers
43k
views
How to split a Grid row into two columns?
I have the Grid layout with 3 rows.How do i split the 3rd row into 2 columns.
<Grid.RowDefinitions>
<RowDefinition Height="0.75*"/>
<RowDefinition Height="0.25*"/>
<...
- 2,023
18
votes
1
answer
23k
views
Set css grid child element's size on the grid, without specifying what column or row it should go into
Is it possible do set a div's height and width in amount of rows/columns they should span, without specifying exactly which columns or rows they should go into?
For example, if I have two classes, ...
- 315
17
votes
7
answers
49k
views
How to get X and Y index of element inside GridLayout?
I am studying a java tutorial and saw that the way to find the x/y indexes of a JButton inside a GridLayout is to traverse a bidimensional array of buttons b which is associated to the layout and ...
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
17
votes
3
answers
11k
views
How to make an element fill the remaining viewport height?
I'd like to use CSS Grid. Something like this I think…
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto auto [whatever's left of the vh] auto auto;
...
- 320