All Questions
Tagged with grid-layout html
406
questions
189
votes
5
answers
221k
views
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...
- 12.2k
110
votes
4
answers
297k
views
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 ...
- 3,850
69
votes
9
answers
63k
views
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 ...
- 50k
47
votes
3
answers
62k
views
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:
<div class="grid">
<div class="expand">...
- 12.6k
45
votes
2
answers
38k
views
Is it possible to place more than one element into a CSS-Grid-Cell without overlapping?
I have three columns and one row and I want to place each grid-element into one of the three resulting cells. This is what I want, using three container-elements:
main {
display: grid;
grid-...
- 553
43
votes
4
answers
59k
views
Make a <div> square when there is a dynamically changing width based on percentage [duplicate]
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 ...
- 2,047
34
votes
8
answers
68k
views
How to make a fixed column in CSS using CSS Grid Layout?
I've made a simple site with a #container div that is parent to two divs: #left and #right, by using Grid Layout:
Is there any way to make the left column fixed? I'd like the left text to persist on ...
- 426
34
votes
6
answers
63k
views
Set rowSpan or colSpan of a child of a GridLayout programmatically?
I have a GridLayout with 5 columns and 3 rows. Now I can insert arbitrary child views, which is great. Even better is, that I can assign columnSpan=2 to some item in order to span it to 2 columns (the ...
- 1,008
30
votes
3
answers
81k
views
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 ...
- 876
25
votes
3
answers
13k
views
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 ...
- 3,998
21
votes
10
answers
38k
views
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 ...
- 2,314
21
votes
3
answers
85k
views
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 ...
- 311
20
votes
4
answers
35k
views
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 ...
- 1,302
17
votes
1
answer
11k
views
CSS grid, remove gap when area is optional
I'm starting using CSS grid (pretty amazing!). I'm starting with the most basic layout: mobile layout. Also, I'm using media queries to change the layout as the web page grows.
For now, my layout ...
- 2,707
15
votes
1
answer
41k
views
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'...
- 414
15
votes
3
answers
21k
views
Top navbar overlaps with main content
I'm converting my landing page from Bootstrap to Semantic-UI. The page has a position fixed top navbar. The main content is divided in two columns (3-cols and 9-cols). The left column is used to show ...
- 8,121
12
votes
1
answer
25k
views
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 > ....
- 257k
10
votes
2
answers
7k
views
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-...
- 621
9
votes
2
answers
58k
views
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 ...
- 420
9
votes
3
answers
12k
views
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://...
- 811
9
votes
3
answers
895
views
Auto-growing margins when screen width get stretched
I have a list (<ul />) that I try to display as a grid. The cells have a fixed width (let's say 100px): the number of cols and rows depends then on the screen resolution.
When the screen has a ...
- 48.3k
8
votes
2
answers
5k
views
How to create dynamic drag and drop layout with react-grid-layout
I am using react-grid-layout to make drag-drop and resize components, So i am able to achieve the functionality as mentioned in the doc.
My Issue
I am creating dynamic UI so I am rendering my UI with ...
- 780
8
votes
4
answers
11k
views
Prevent grid items from expanding when content is added
I'm trying to create a layout where the screen is divided into some number of equally-sized cells. When I fill one of the cells with content, it stretches to be larger than the other cells, even ...
- 5,230
7
votes
3
answers
11k
views
Making the content inside grid items equal height in CSS Grid
I am trying to figure out how to get two columns of my grid the same height. Here is what I am after:
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx
x qqqqqqqqqqqqq x x qqqqqqqqqqqqqqq x
x ...
- 387
7
votes
1
answer
5k
views
Inline Grid related CSS disappear in Gmail [duplicate]
I am working on a HTML email template using NopCommerce. I've put all my CSS inline since and doesn't work, for the most part everything works except for the Grid styles. Specifically grid-gap and ...
- 217
7
votes
1
answer
15k
views
Centering columns in CSS Grid
I'm trying to create a simple css grid using the native CSS Grid properties. It works as I wanted, except I want to create a utility class that can center a column in a grid.
Is there a way to create ...
- 2,340
7
votes
2
answers
12k
views
CSS Grid Layout with Max-Width, Centered Content
I'm in the midst of learning CSS Grid (long overdue, I know). I've challenged myself to convert a relatively standard float-based layout to a grid, but can't figure out this last part.
My goal is to ...
- 61.2k
7
votes
4
answers
2k
views
Align items with different heights in a grid and have them match lines of alignment
I want to create a page where my elements are displayed in a Grid. I want to align the items by line. I want to achieve visually the following result, but I don't know how: https://codepen.io/shirkit/...
- 1,024
6
votes
2
answers
37k
views
css grid-template-areas property not aligning grid items [duplicate]
I am new to css grids, and I am trying to build a page with this layout:
The problem I have is the .main class and the grid inside the container grid.
I think I have the wrong setup for the grid in ....
- 1,515
6
votes
4
answers
3k
views
Flex container with four divs, need three columns, second column with two rows
For a section on a page, I am trying to display two rectangular divs stacked up between two square divs on either side as big as the height of the two stacked divs, inside these divs are img tags.
I ...
- 2,393
6
votes
1
answer
2k
views
Expanding flex items to full width
I'm attempting to create a custom 'iTunes' style expanding layout. However, I am hitting a few issues. I had originally anticipated using flex-box for this. But I can't quite seem to do what I am ...
- 87
6
votes
2
answers
537
views
Wrap CSS grid with auto placement
I'm trying to build a grid that contains card-like items. The cells of each type (headline, image, text, button, ...) should have equal height in each row, determined by the content of the largest ...
- 6,695
6
votes
1
answer
461
views
Grid layout - is this possible using flexbox?
I'm currently using the following grid-layout:
display: -ms-grid;
-ms-grid-columns: 400px 100px max-content 1fr 50px;
-ms-grid-rows: 1fr 1fr;
Which resembles this layout:
| <----------------- ...
- 9,831
5
votes
8
answers
8k
views
Items grid with inner padding only
What techniques are there for creating a products grid that has padding between each item, but only within the grid? For example, what I am trying to achieve is the below:
Sample markup:
<div id="...
- 5,340
5
votes
4
answers
16k
views
How to set a specific flexbox gap in CSS
I'm trying to achieve a flexbox layout with just one flex-grow element and a variable number of smaller elements around it. I need a gap between the elements that's a fixed width - exactly one pixel. ...
- 155
5
votes
3
answers
7k
views
Responsive 4 box grid from two to one columns
I'm a beginner in css and I have a little problem. I tested different methods to handle a responsive 4 div grid with css, and I failed.
I want to responsively arrange the 4 divs as an grid with 2 ...
- 53
5
votes
1
answer
40k
views
Why <div class="clear"></div> used?
I'll adapt my self to what 52framework.com offers. (HTML5, CSS3, JS framework)
Despite watching grid tutorial video and inspecting other demo source codes, I couldn't understand why framework used <...
- 1,176
5
votes
3
answers
3k
views
Center items in grid layout when not enough data to fill entire row
I'm using the new CSS grid layout, basically I'm displaying a series of images, which is fine with six columns, I've gotten that part down, but the content has a variable number, and often times there ...
5
votes
2
answers
3k
views
3-column full screen app layout in Bootstrap 3
I'm creating an admin dashboard for an app, where I need a layout like this:
---------------------------------------------------------------------------------
| ...
- 1,500
5
votes
1
answer
7k
views
How do I use calc() with min-content?
I have a grid layout which can be simplified like this.
What I want to achieve is the .side should take whatever space the content needs to by default using min-content, but user can enlarge it by ...
- 19k
4
votes
1
answer
4k
views
How to swap grid positions (materializecss) on different devices?
I'm building a website using MaterializeCSS
I have two boxes:
A (col s12 m8 l8)
B (col s12 m4 l4)
<div class="container">
<div class="row">
<!-- Box A -->
<...
- 113
4
votes
2
answers
3k
views
Grid with viewport height and inner scrolling div
I'm trying to create a layout that uses a grid that takes up the entire browser viewport (height: 100vh) and then allows a div within one of the grid items to scroll in the Y dimension.
Here's some ...
- 15.6k
4
votes
2
answers
7k
views
css-grid 2x2 or 2x3 layout, depending on number of items
Consider a schedule with a variable number of items, anywhere between 1 and 6.
If there are 1 - 4 items, they should cover a 2x2 layout, like:
ONE TWO
THREE FOUR
If there are 5 - 6 items, they ...
- 158
4
votes
1
answer
4k
views
Grid columns using flexbox with fixed size margin gutters
Is it possible to apply a fixed margin (e.g. 5px) to a cell in a flexbox layout, where the row space is evenly distributed among its columns?
Want I want to achieve:
My current CSS will only align 3 ...
- 3,148
4
votes
2
answers
11k
views
In Bootstrap how to get two rows with different dimensions beneath each other
I'm using Bootstrap 3. I have two rows. The first row has 4x3 columns. The second row has one column of 3 and one column of 9. The column of 9 has twice the height of all the other columns. I would ...
- 478
4
votes
3
answers
3k
views
Create table-like grid with CSS starting from a simple HTML list
Is there any way in CSS to create this:
-----------------------------------
| lorem ipsum dolor | consectetur |
| sit amet | |
-----------------------------------
| adipiscing ...
- 41
4
votes
4
answers
1k
views
What kind of display are the direct child elements of a container using display: grid?
If there is just a p tag in the HTML that has a background color of blue, and has margin: auto, then it takes up the width of the page, and the width and padding can be changed, like an inline-block.
...
user11071538
4
votes
4
answers
5k
views
How to fit image to frame keeping aspect ratio and center in thumbnail list
I want to show list thumbnail box as data grid. each thumbnail image has to be placed in frame with specific width and height (for consistency) as follow:
<div class='frame'>
<img src='...
- 75
4
votes
1
answer
4k
views
Responsive Grid Layout - Dashboard Style - 100% height&width container
Am looking to make this a pure responsive css grid for 11 html divs.
<div class="dashboard page-container">w100%, h100%
<div class="box1">w20%, h25%</div>
<div class="...
- 883
4
votes
1
answer
10k
views
Why are my css grid items overlapping when arranged in a particular layout?
I am a noob trying to learn css grid layout. I'm trying to create a grid-layout using grid-template-areas.
However,the items keep overlapping because I have to explicitly specify the height of the ...
