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
14
votes
1 answer

Tkinter grid fill empty space

I did search for a lot of examples before posting but still can't properly use the tkinter grid. What I want: my code: import tkinter as tk from tkinter import ttk root = tk.Tk() b1 = ttk.Button(root, text='b1') b1.grid(row=0, column=0,…
Vítor Nunes
  • 143
  • 1
  • 1
  • 5
14
votes
3 answers

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; position: relative; }
Ben Dunkle
  • 191
  • 1
  • 7
14
votes
1 answer

CSS grid items based on minimum width and percentage

I currently have a div style as a grid display. The grid-template-columns are each 1/3 of the body. However, I would like to limit each box to a minimum width of, say, 200px. This way, on mobile I won't have three extremely skinny boxes. Is there…
Grant Emerson
  • 404
  • 1
  • 4
  • 13
14
votes
5 answers

How to remove border around buttons?

I have a JPanel with the GridLayout. In every cell of the grid I have a button. I see that every button is surrounded by a gray border. I would like to remove these borders. Does anybody know how it can be done?
Roman
  • 124,451
  • 167
  • 349
  • 456
13
votes
1 answer

Generate table with rowspan using Angular 2

I have a data structure like this: [ "category1": { "name": "Cat 1", "competences": [{ "name": "Comp 1", "users": [{ "name": "user1", "level": 99, }, { "name": "user2", "level": 99, …
GergelyPolonkai
  • 6,230
  • 6
  • 35
  • 69
13
votes
1 answer

Create a Chess board with JPanel

I have a simple Chess board in a JPanel with GridLayout(8,8) as layout manager. I am trying to add panels for the fields' column name and row number. Right now I've created another panel with BorderLayout as layout manager, and in this panel I add…
Jamgreen
  • 10,329
  • 29
  • 113
  • 224
13
votes
1 answer

Don't understand how to use GridLayout.spec()

This GridLayout is going in my app that has a lot of levels. Each level has a different number of rows and columns. I assume that this GridLayout would be my best bet to use to satisfy my needs. Also, all need to be done at runtime…
Matt
  • 3,882
  • 14
  • 46
  • 89
12
votes
2 answers

Tkinter.grid spacing options?

I'm new to Tkinter, and I tried creating an app with the grid layout manager. However, I can't seem to find a way to utilize it the way I want to. What I need to do is simulate a grid full of 'cells' so that I can place, for example, a label in cell…
PlatypusVenom
  • 547
  • 2
  • 6
  • 12
12
votes
1 answer

Single full-width column in row with twitter bootstrap grid

When using bootstrap's grid, what is the best way to markup a single full-width column in a row? Do you have to use container and row to hold the column (.container > .row > .col-xs-12 > .actual-content), or can you get rid of the row and column…
knittl
  • 246,190
  • 53
  • 318
  • 364
12
votes
3 answers

Dynamic height of TextView within a GridLayout

I have a problem using GridLayout using library compatibility (not tried without). I am using app:layout_gravity="fill_horizontal" instead of android:layout_gravity="fill_horizontal" but all the content inside the TextView is not displayed. In order…
Jul
  • 1,039
  • 3
  • 12
  • 20
11
votes
3 answers

How does the TED Talk home page organise the grid of videos?

I've been trying to work out exactly how the TED Talk homepage works. Leaving aside all the animation rubbish, I find the way that the boxes are organised is really fascinating. At first glance it looks like the jQuery masonry plugin, bu it quickly…
peterjwest
  • 4,294
  • 2
  • 33
  • 46
11
votes
6 answers

Pushing and Pulling Columns - Bootstrap 4

This is what I need: Desktop: B A Mobile: A B Here is my HTML:
A
B
It is in correct…
Alena
  • 1,134
  • 6
  • 19
  • 45
11
votes
2 answers

Arrange multiple (32) .png files in a grid

I've been pulling my hair out for the past week trying to figure out elementary R coding but can't seem to get anywhere (haven't used R since 2013 not that its a great excuse). All I want is a 4x8 grid made up of 32 .png files (maps I've made), and…
IdaFish
  • 307
  • 1
  • 3
  • 12
11
votes
2 answers

CSS3 column layout with dynamic number of columns

I have a set of images that I want to display in the following pattern: [1] [4] [7] [10] [13] [2] [5] [8] [11] ... [3] [6] [9] [12] I know that I can always manually group 3 images into a div.column or something similar, but I want to achieve…
Christian Schnorr
  • 10,768
  • 8
  • 48
  • 83
11
votes
2 answers

IntelliJ: Getting GridLayout work

I try to use GridLayout in my App, but it wont work. I used this Tutorial: IntelliJ and android.support.v7.widget.GridLayout But it still wont work. I get the following Error: error: No resource identifier found for attribute 'columnCount' in…
Prexx
  • 2,959
  • 5
  • 31
  • 48
1 2 3
…
99 100