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
0
votes
2 answers

Magazine style grid with Bootstrap

I want to make a magazine style website and preferably with Bootstrap (if that's possible). I want it to look like this: Can anyone tell me if it's possible to make something like this with Bootstrap? If not maybe someone can tell me if there is a…
Baspa
  • 1,099
  • 1
  • 18
  • 49
0
votes
0 answers

How I cant set Visible Again in Gridlayout?

My Imageview is in Grid Layout I have a ontouchlisteners when I Touch the imageview I set it in Invisible and I have a DragListener when I Drop the Imageview the Error(ConcurrentModificationException) is appears I want to do is when I drop the…
0
votes
1 answer

GridLayout Items not visible in Nougat

I have to dynamically build views and I have used GridLayout as the parent layout to populate 2 views in a row. The code works perfectly fine in the platforms below Nougat. But in nougat version, the views are not populated. Here is the code…
0
votes
2 answers

GridLayout overflows the screen

I have images in a Grid Layout. However the Grid Layout rows overflow the screen. I think the image widths are not the cause of problem. If I delete the images, the grid layout lines still overflow. How can I solve this? Code:
0
votes
2 answers

CSS grid: wrap three divs simultaneously

With CSS grid, how can I style three divs to wrap at the same time when the screen gets smaller ? That means to go from this: +---------+--+---------+--+---------+ | div | | div | | div | +---------+--+---------+--+---------+ to…
Nicolas Marshall
  • 4,186
  • 9
  • 36
  • 54
0
votes
0 answers

Flexbox order challenge, differing heights on desktop

I would like 3 content areas to align like the diagram I uploaded. If the image link doesn't work basically in desktop view it's 2 div's in one column (named 1 & 3), and 1 div in the next column (named 2) - in that order. Further description: divs 1…
0
votes
1 answer

Adding Grid of Buttons to JPanel

I'm trying to make a grid of 20px x 20px buttons that I define as "cells", blank by default, no special decorations such as shading, and change color when clicked. (They are meant to show "1" just for testing purposes). I make a Cell class to define…
0
votes
1 answer

Add horizontal scroll in CSS Grid Layout

I want to create an image gallery in the CSS Grid Layout and I need to add a horizontal scrollbar for non-viewable images. I want the image block to be added not to the bottom but to the right. .wrapper { display: grid; grid-template-rows:…
0
votes
1 answer

Why does my repeat function not work in grid property, in css?

This code works fine: grid: [row1-start] 'header header header header header' auto [row1-end] [row2-start] 'menu content content content content' auto [row2-end] [row3-start] 'footer footer footer footer footer' auto [row3-end] / 1fr 1fr 1fr…
0
votes
1 answer

Collapse or merge grid cells if content is not there

If I have a grid like this: Is there a way to automatically push the grid item 3 up to take the space of grid item 1? Structure:
Content
Content
For grid item 2 I do this: grid-row: 1 / span…
strangeQuirks
  • 4,761
  • 9
  • 40
  • 67
0
votes
2 answers

How to get all items on one row inside the nav-bar, and maintain the responsive design?

How can I arrange my grid-layout to get all the items in the nav-bar on one row, with menu items to the left, and some links (or in this example, just one button) to the right?
0
votes
1 answer

CSS Grid: How to make an area always on top of another area

I want the area in red to always fit the content so that the area below (the commenting section) is always right after and not down below. In chrome, it works, but not in Firefox (see picture). I thought that by adding grid-template-rows:…
Marco
  • 2,687
  • 7
  • 45
  • 61
0
votes
0 answers

How do I layer a widget over another widget in an Android GridLayout?

Problem In Android Studio 3.0.1, I am creating a screen with a GridLayout. Within this GridLayout there are three TextViews and an ImageView. Here is a visual perspective of the ComponentTree I am describing: I want the three TextViews to be a…
isakbob
  • 1,439
  • 2
  • 17
  • 39
0
votes
0 answers

WPF collapsible tree with aligned columns

I'm trying to improve the real-time log display of a rather complicated system. Currently there is a significant tradeoff between situational awareness (improved by displaying only high-level events) and reproducibility (which requires lots and…
Ben Voigt
  • 277,958
  • 43
  • 419
  • 720
0
votes
1 answer

Buttons dont add to Jframe

I can't create a field with this code. I want to load a file and the field should add arrays for the specific size. The problem is that the buttons are not shown in the frame. Does anyone have an idea why they are not in the gridLayout? I already…