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
10
votes
5 answers

How to add offset material-ui Grid

I'm trying to make a small 'Item added' popup dialog on material-ui using it's Grid system. But i can't figure out how to add offset to the Grid. I'm trying to achieve something similar to Bootstrap's col-sm-10 offset-1 using
Cayo Eduardo
  • 129
  • 1
  • 1
  • 10
10
votes
2 answers

HTML grid layout disrupted by SVG child element

I'm trying to make a page with a simple 3x3 grid layout: header top, footer bottom, two sidebars, and the main display. Everything works fine until I add the SVG element that should fill the main-display div:
M-N
  • 621
  • 7
  • 20
10
votes
1 answer

How to get items to stretch to fill width?

.container { display: grid; grid-template-columns: repeat(auto-fill, 100px); grid-gap: 3px; border: 1px solid green; } .item { border: 1px solid red; height: 50px; }
…
mpen
  • 272,448
  • 266
  • 850
  • 1,236
10
votes
1 answer

Is it possible to use grid layout to make a table with frozen/fixed header

The fact that grid layout allows me to build a table in CSS in a completely different way, I was trying to figure out a way to make a grid layout where the first row stays in view, whilst the rest scroll. Importantly without losing the grid behavior…
user2908232
  • 441
  • 3
  • 12
10
votes
2 answers

How to align separate Grids created via templates along their columns / rows?

I thinks that in this case A picture is worth a thousand words: XAML: …
Erez
  • 6,405
  • 14
  • 70
  • 124
10
votes
3 answers

Specify the columns to start from the right with CSS Grid

I'm trying to change my Flexbox layout to the new display: grid, and I have three columns.
It…
Yami Odymel
  • 1,782
  • 3
  • 22
  • 48
10
votes
2 answers

How to place one widget over another in Qt

i have a window in Qt, on that i am drawing a picture. now i want to place the progressbar over it. how can i do that?.. steps i am following to do Create a window, Draw picture in paint event of window Then create QGridLayout layout, add your…
Naruto
  • 9,476
  • 37
  • 118
  • 201
10
votes
3 answers

Bootstrap 3 and .col-xs-* -- Do you not need rows of 12 units?

I'm a little confused by the Bootstrap 3 documentation and thus usage of the .col-xs-* classes. The docs for Grid Options say that all of the grid systems use 12 columns. If you take a look at Bootstrap 3's docs for an Example Mobile and Desktop…
user3290740
  • 103
  • 1
  • 1
  • 5
10
votes
3 answers

Is there any way to force GridLayout to leave empty cells?

I have a JTabbedPane with 2 JPanels set to GridLayout(13, 11). The first JPanel has enough of the cells filled out that it leaves the empty cells. The second JPanel has significantly fewer cells filled and this results in each button getting…
Pentarctagon
  • 413
  • 2
  • 5
  • 12
10
votes
1 answer

GridLayout from support library does not show 2 rows on Android 2, onChildVisibilityChanged Error

Has anybody gotten the support library to render a grid layout correctly in Android 2? Instead of 2 rows and columns I get a single row on the screen and see this error in the logcat output: Android GridLayout Could not find method…
Beth Mezias
  • 270
  • 3
  • 13
9
votes
3 answers

Using fixed position with a grid layout framework

So I am creating a web page, where the menus on the left hand side are fixed (They follow you when you scroll up and down the page). I am currently using The Grid layout: Foundation (by zurb) http://foundation.zurb.com/docs/grid.php. Which uses a…
Adim
  • 811
  • 2
  • 10
  • 25
9
votes
3 answers

Text align in JLabel

I've got GridLayout-JPanel. In every cell there is a JLabel with some String. How can I right-align this text in my cells?
Ariel Grabijas
  • 1,472
  • 5
  • 25
  • 45
9
votes
1 answer

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 filled with a list of items. A 2 element top panel. A…
Cathal Cronin
  • 1,245
  • 2
  • 13
  • 27
9
votes
2 answers

Padding to CSS Grid

I am a beginner to HTML and CSS, so I've been experimenting with the different systems like Flex and CSS Grid. I've run into an issue where I can't add padding to an element inside a Grid Column. Is there any way to fix this? When I try to add…
Jordy337
  • 390
  • 2
  • 5
  • 17
9
votes
3 answers

Huge whitespace around plotly chart in bootstrap grid

I have a .Net application in which I am trying to create a graph using bootstrap.js and plotly.js. I have a problem with a huge white-space in my grid when I create a responsive chart. I have figured out that a part of the problem is that size of…
Zeliax
  • 4,987
  • 10
  • 51
  • 79
1 2 3
…
99 100