Stack Overflow
Stack Overflow

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.

GridLayout is similar by concept to the table layout, placing objects into multiple rows and columns so that all cells in the same column usually have the same width.

grid layout is a "CSS table" that allows to divide available space into columns and rows using a set of predictable sizing behaviors. Unlike HTML table, CSS grid layout is defined in CSS, placing HTML objects into the cells by id.

GridLayout supports cell padding and may have unspecified number of rows (there are enough rows to place all elements using the specified number of columns, new rows are added as required). It does not support cells spanning over multiple rows or columns (another layout, GridBagLayout does).

Resources

2180 questions
27
votes
4 answers

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(14048): horizontal constraints: x5 - x0 > 1115, x5 -…
mdupls
  • 2,012
  • 1
  • 27
  • 40
26
votes
4 answers

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 that takes up the existing free space and no more,…
waterproof
  • 4,943
  • 5
  • 30
  • 28
25
votes
3 answers

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 apparently working perfectly, however after doing some…
JohnC
  • 3,938
  • 7
  • 41
  • 48
25
votes
5 answers

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 application available to older version of android as well, I…
user475680
  • 679
  • 1
  • 9
  • 21
24
votes
3 answers

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 child. codepen body { max-width: 1024px; …
Corey Bruyere
  • 786
  • 1
  • 10
  • 21
24
votes
4 answers

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 doing this? I don't want to use pack(), by the way. I…
L4undry
  • 281
  • 1
  • 4
  • 16
23
votes
4 answers

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? Example: The following styling doesn't seem to…
Richie
  • 379
  • 1
  • 4
  • 15
22
votes
6 answers

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 tried Grid layout by choosing a good number of…
imanis_tn
  • 1,150
  • 1
  • 12
  • 33
21
votes
2 answers

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 a five-element row, how could I put a bigger…
PaulCo
  • 1,398
  • 4
  • 17
  • 31
21
votes
2 answers

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-heigh (ratio) works, I have the documentation, but…
storm_buster
  • 7,362
  • 18
  • 53
  • 75
21
votes
10 answers

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 images as a mosaic using only HTML/CSS? HTML :
Developer Desk
  • 2,294
  • 8
  • 36
  • 77
21
votes
3 answers

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 issue in CSS. …
user3176492
  • 311
  • 1
  • 2
  • 5
20
votes
4 answers

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 I am trying with the following code snippet
newbie
  • 1,282
  • 3
  • 20
  • 43
20
votes
6 answers

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++){ panel.add(new JLabel("Label")); }
Jessy
  • 15,321
  • 31
  • 83
  • 100
19
votes
2 answers

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.
GANI
  • 2,013
  • 4
  • 35
  • 69
1 2
3
…
99 100