This question already has answers here:
CSS grid square layout [duplicate]
(4 answers)
Closed 2 months ago.
In HTML I create a grid container, and style it in the following way:
height: 95%;
display: grid;
grid-template-columns: repeat(8, auto);
I then fill my grid with divs styled in the following manner.
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1;
background-color: red;
position: relative;
As you can see the tiles are squared, but the grid 'cells' are rectangles. I would like to make the cells squared, so that the gap between tiles on different rows is no longer there.
You can use the gap property to define the gaps between the grid cells. Also make sure, you haven't set the align-content property to a value, that creates space between the rows.
.container {
height: 95%;
display: grid;
gap: 4px;
grid-template-columns: repeat(8, auto);
}
.container > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1;
background-color: red;
position: relative;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Related
How should I edit the CSS and/or HTML so that these squares fit to a particular maximum width, while maintaining the 4x4 square structure? Right now, it resizes to the width of the browser window, but if the browser is stretched out across the screen, the squares are far too large and the height goes well beyond the height of my screen.
I've tried adding a container div and adding a max-width, but that does not seem to relate to the width of 4 squares next to each other, and changes the width of each square without adjusting the height evenly.
.w {
overflow: hidden;
}
section {
margin: -1%;
padding: 20px;
}
section div {
background: #CCC;
float: left;
height: 24vw;
margin: 1%;
width: 23%;
color:white;
}
<div id="playGrid" class="w">
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
How about, you know, CSS grid? You can use the width and height to adjust the whole shebang's size.
#playGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 15px;
align-content: stretch;
width: 50vw;
height: 50vw;
}
#playGrid div {
background: #CCC;
color: white;
}
<div id="playGrid" class="w">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
</div>
You can leverage CSS Grid Layout to define your grid, and then bound the height and width of the section to 100vh:
#playGridSection {
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(4, 25%);
height: 100vh;
width: 100vh;
margin-right: auto;
margin-left: auto;
}
section div {
background: #CCC;
color:white;
align-self: stretch;
justify-self: stretch;
margin: 1vh;
}
<div id="playGrid">
<section id="playGridSection">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
You may relay on flex and a pseudo to stretch your element to a square boxe.
Here is a basic example. (You should also clarify what kind of content should be standing inside and which kind of layout you need, so we can tune/update HTML(the content to put inside) & CSS according to your real expected result, it could be like a sudoku grid ? Responsive grid of squares within a responsive grid of squares )
body {margin:0;}
.w {}
section {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
padding: 20px;
max-width: 100vmin;
margin: auto;
}
section div {
background: #CCC;
min-width: 21%;
/* cannot be more than 4 on a row */
flex-grow: 1;
/* stretch their width evenly */
margin: 1vmin;
}
section div:before {
/* note, you need to stretch only one per row and
the selector can be also : section div:nth-child(4n):before */
content: '';
padding-top: 100%;
/* stretch height using width as a reference (padding/margin units in % ) */
float: left;
/* let it on the side to add content .. aside */
}
<div id="playGrid" class="w">
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
I'm trying to make a grid container that has undefined number of columns and I want it to be one row. Is there any way to do this in CSS?
.grid {
display: grid;
grid-gap: 5px;
}
.grid > div {
background: #ccc;
min-height: 100px;
}
<div class="grid">
<div></div>
<div></div>
<div></div>
</div>
There is two ways actually.
Using grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));. Fits new columns automatically and determines it's mimimum and maximum width. More about Grid Template Columns and auto-fit/auto-fill.
Using grid-auto-flow: column;. Determines automatically placement behavior of grid cells. More about Grid auto flow.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
grid-gap: 5px;
margin-bottom: 5px;
}
.grid2 {
display: grid;
grid-auto-flow: column;
grid-gap: 5px;
margin-bottom: 5px;
}
.grid > div, .grid2 > div {
background: #ccc;
min-height: 100px;
}
<div class="grid">
<div></div>
<div></div>
<div></div>
</div>
<div class="grid2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Is it possible to have a larger nested cell that spans rows and columns using the Bootstrap 3 Grid CSS?
No need any bootstrap. You only need to setup one cell using grid-area. More about it here https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
Browsers support of grid-area https://caniuse.com/#search=grid-area thanks to Gerard
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
min-height: 300px;
}
.grid > div {
background: #ccc;
}
.grid > div.my-big-sell {
grid-area: 2 / 2 / 4 / 6;
background: #000;
}
<div class="grid">
<div class="my-big-sell"> </div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
I want containers in a brick wall pattern, see image. The borders should collapse into 1px (works for tables only). Tiles should change border color during interaction. I'm seeking cleanest solution. Things I've tried:
A single table: aligns the columns, ruining brick layout.
Each row as separate table: allows border-collapse within the row only.
Margin 1px with background color: won't collapse with floated or inline-block divs. (I read margin-collapse is for vertical space only.)
My best solution (not pictured): each row is separate table with border-collapse, border around half cells (not preferred), removed top borders of all cells, added border to top of top row. Container in the containers have 1px transparent border which becomes red when tile is highlighted. I lose space to this border. I chose transparent instead of 0px to keep it consistent. The half cells aren't interactive, they're just for layout. I wish they didn't have a border so it would have a toothy look on edge.
For tables I'm using divs with display:table etc. I was hoping not to resort to canvas yet, though at some point I will for overlaying robust graphics.
you may relay only on 2 borders or box-shadow to avoid interaction with the container.
example with box shadow :
* {
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
}
article {
margin: 15px;
flex: 1;
display: grid;
grid-template-columns: repeat(9, 1fr);
border: 1px solid;
background: tomato;
}
div {
box-shadow: 1px 1px 0 1px;
grid-column: auto / span 2;
}
div:nth-child(10n),
div:nth-child(10n-9) {
grid-column: auto / span 1
}
<article>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</article>
This question already has answers here:
Aligning grid items across the entire row/column (like flex items can)
(3 answers)
Closed 4 years ago.
I have a basic grid setup as follows:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
grid-gap: 1rem;
}
When the grid auto-breaks into new rows, I either want the elements on the new rows to take up a proportional amount of space or be centered so that they look nice.
For example, if I have 3 elements in one row, then I want each to take up 33% of the container space. But when the grid breaks and only 1 element is on the new row, I want that element to either take up 100% of the row width, or at least look centered -- which is contrary to the default behavior of placing the element all the way to the left and taking up only 1fr of space.
Similarly, if there are 2 elements on the new row, then each should take up 50% of the row space or the two together should look centered.
I don't know how many elements there will be in total. Ideally, the solution should work for a minimum of 1 up to an arbitrary number of elements.
If anyone has any ideas, please let me know. Thanks.
This is a job for flexbox, I don't think it will be easy to achieve with CSS grid:
.grid-container {
display: flex;
flex-wrap:wrap;
border:1px solid;
margin:2px;
}
.grid-container>div {
height: 50px;
background: red;
margin: .5rem;
flex: 1 1 calc(33% - 1rem);
}
<div class="grid-container">
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
If you want the element to be centred simply do this:
.grid-container {
display: flex;
flex-wrap:wrap;
border:1px solid;
margin:2px;
justify-content:center;
}
.grid-container>div {
height: 50px;
background: red;
margin: .5rem;
flex: 0 1 calc(33% - 1rem); /*disable the flex-grow*/
}
<div class="grid-container">
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>