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
560
votes
35 answers

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 other. justify-content: space-between; should be…
Thorben Croisé
  • 12,407
  • 8
  • 39
  • 50
314
votes
3 answers

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 should fill the page, so the year grid container gets…
Loilo
  • 13,466
  • 8
  • 37
  • 47
246
votes
1 answer

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 GridView to display the images dynamically.
Lakshmi Sreekanth Chitla
  • 2,657
  • 2
  • 16
  • 16
228
votes
2 answers

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 want equal height for all elements in a grid across…
Hlsg
  • 3,213
  • 2
  • 12
  • 17
187
votes
5 answers

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...
garethdn
  • 12,022
  • 11
  • 49
  • 83
102
votes
4 answers

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 to find a solution. Note: This is intended for…
Chris
  • 3,680
  • 6
  • 26
  • 43
81
votes
1 answer

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
Nerdar
  • 1,103
  • 2
  • 10
  • 23
68
votes
6 answers

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 directly. I tried to use grid-auto-flow: dense, but it…
Bondsmith
  • 1,343
  • 3
  • 13
  • 27
68
votes
9 answers

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 from a table layout.] I'm researching CSS…
Larry Lustig
  • 49,320
  • 14
  • 110
  • 160
57
votes
10 answers

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'; import PropTypes from 'prop-types'; import {…
reza
  • 1,746
  • 6
  • 16
  • 32
55
votes
7 answers

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 of 100%... Is there way to make this happen without…
AnnaSm
  • 2,190
  • 6
  • 22
  • 32
51
votes
8 answers

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 | | 2 | | …
Ivan Durst
  • 1,163
  • 2
  • 12
  • 24
43
votes
4 answers

Make a

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 on various paper sizes. I can easily calculate…
Nate
  • 2,035
  • 8
  • 23
  • 33
41
votes
3 answers

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:
Long text label
Andrea
  • 12,296
  • 4
  • 32
  • 39
40
votes
1 answer

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")); This looks…
Grammin
  • 11,808
  • 22
  • 80
  • 138
1
2 3
…
99 100