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'm creating a 4x3 grid layout and want the second row to be centered since the top row has four elements.
Something like this:
Demo code:
.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 50% 50%;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
</div>
Easy to do it with flex
and to center use justify-content: center; to set width use flex: 0 0 cala(20% - 40px);:
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
font-size: 30px;
text-align: center;
flex: 0 0 calc(20% - 40px);
padding: 20px;
margin: 5px;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
</div>
An EIGHT column grid is actually what you are after.
.grid-container {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 50% 50%;
padding: 10px;
grid-gap: 4px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
grid-column: span 2
}
.grid-item:nth-child(5) {
grid-column: 2 / span 2;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
</div>
Related
I have a 2 column layout and wish to split one row to a 3 column layout is that possible without specifying the 3 column layout initially?
Example
all 7s should be split to 3 parts in that row (see code output)
1 to 1.5 obviously doesn't work.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.custom {
grid-column: 1/1.5
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
</div>
A hack that should be used with caution (or not used at all)
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
box-sizing: border-box;
}
.custom {
width: 66.66%
}
.custom+.custom {
margin-left: -33.33%;
grid-column: 2;
grid-row:3;
}
.custom+.custom+.custom {
margin-left: 33.33%;
grid-column: 2;
grid-row:3;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
</div>
And the logical solution is to move to 6 columns:
.grid-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.grid-item {
grid-column:span 3;
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
box-sizing: border-box;
}
.custom {
grid-column:span 2;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
</div>
I have a layout that is a sidebar and a grid both wrapped in a flexbox. I'd like to put a div underneath the grid so it can have prev/next buttons, like in this image, but I can't figure out how to do that. The grid resizes itself with the window so the grid can take as many rows as necessary and then the div should go below that, and be as wide as the grid.
This is what I have, but the div is on the right of the grid:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Boardgame Database</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
aside {
background-color: red;
flex: 1;
min-width: 250px;
}
.grid-container {
flex: 4;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-item {
border: 1px solid black;
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
}
#flex-container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
</style>
</head>
<body>
<div id="flex-container">
<aside class="sidebar">
</aside>
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
</section>
<div id="page-buttons">
prev
next
</div>
</div>
Checkout the following Code.
#main{
display :flex;
}
#sidebar{
width:70px;
height: 300px;
border: solid black 1px;
}
#grid-area{
width:200px;
height: 300px;
border: solid black 1px;
display: block;
}
#grid{
width:200px;
height: 250px;
border: solid black 1px;
display: block;
}
<div id="main">
<div id="sidebar"></div>
<div id="grid-area">
<div id="grid"></div>
<div id="button">next / prev</div>
</div>
</div>
You should use nested flex containers. Section and bottom div should be wrapped inside another flex container with flex direction to column.
So outer flex will make sidebar & inner flex container to be side by side.
Or just use a normal div container instead of flex.
here is another example only with grid keeping the pre/next button at the bottom of the viewport:
body {
margin: 0;
}
#grid-container {
display: grid;
height: 100vh;
grid-template-columns: minmax(250px, 1fr) 4fr;
grid-template-rows: 1fr auto;
}
aside {
background-color: red;
border: 1px solid;
margin: 0.25em;
grid-row: span 2;
grid-column: 1;
}
section,
#page-buttons {
grid-column: 2;
border: solid 1px;
margin: 0.25em;
}
section {
overflow: auto;
}
#page-buttons {
display: flex;
gap: 1em;
padding: 0.5em;
background: lightgray;
justify-content: center;
}
.grid-item {
border: 1px solid black;
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
}
<div id="grid-container">
<aside class="sidebar">
</aside>
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
</section>
<div id="page-buttons">
prev
next
</div>
</div>
I have a 2 column layout and wish to split one row to a 3 column layout is that possible without specifying the 3 column layout initially?
Example
all 7s should be split to 3 parts in that row (see code output)
1 to 1.5 obviously doesn't work.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.custom {
grid-column: 1/1.5
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
</div>
A hack that should be used with caution (or not used at all)
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
box-sizing: border-box;
}
.custom {
width: 66.66%
}
.custom+.custom {
margin-left: -33.33%;
grid-column: 2;
grid-row:3;
}
.custom+.custom+.custom {
margin-left: 33.33%;
grid-column: 2;
grid-row:3;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
</div>
And the logical solution is to move to 6 columns:
.grid-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.grid-item {
grid-column:span 3;
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
box-sizing: border-box;
}
.custom {
grid-column:span 2;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
</div>
I'm no good in css, I just want to remove only the edges inside the box, and leave only the outer edges.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
Example: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
Here's a way you can accomplish that by removing the border on the grid items and using the outline property on the container:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
outline: 1px solid black;
outline-offset: -10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
Is this what you are looking for?
To do this you only have to create a container box with border.
.grid-container {
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.container {
border: 1px solid rgba(0, 0, 0, 0.8);
grid-template-columns: auto auto auto;
display: grid;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</div>
you could also change your Code like this:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.8);
box-shadow: 0 0 0 10px #2196F3;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
I've a css grid and multiple items inside it. Right know it's covering the whole width possible. What I want is to limit the width of the container (such as making it only 700px) instead of covering the whole width.
I've tried to use width or max-width properties for the container but none of them is successful. The content inside the container overflows. I should be missing something but do not know what.
Here is the codepen:
https://codepen.io/sercanyilmaz/full/YaRmPN/
#import url('https://fonts.googleapis.com/css?family=Muli');
#import url('https://fonts.googleapis.com/icon?family=Material+Icons');
.wrapper {
display: grid;
grid-template-columns: repeat(350, 1fr);
grid-template-rows: repeat(33, 1fr);
grid-gap: 4px;
grid-row-gap: 5px;
background-color: #a5adb0;
border-radius: 5px;
color: #ddd;
padding: 15px;
font-family: 'Muli';
}
.func {
grid-column: span 25;
grid-row: span 3;
border-radius: 5px;
background: #20252A;
display: grid;
align-items: center;
justify-items: center;
border-bottom: 5px solid #000;
cursor: pointer;
}
.num {
grid-column: span 24;
grid-row: span 6;
border-radius: 5px;
background: #20252A;
display: grid;
align-items: center;
justify-items: center;
border-bottom: 5px solid #000;
cursor: pointer;
}
.back {
grid-column: span 38;
}
.letters {
grid-column: span 24;
grid-row: span 6;
border-radius: 5px;
background: #20252A;
display: grid;
align-items: center;
justify-items: center;
border-bottom: 5px solid #000;
cursor: pointer;
}
.tab {
grid-column: span 38;
}
.caps {
grid-column: span 42;
}
.enter {
grid-column: span 44;
}
.left-shift {
grid-column: span 50;
}
.right-shift {
grid-column: span 60;
}
.fn {
grid-column: span 22;
}
.left-command,
.right-command {
grid-column: span 28;
}
.space {
grid-column: span 120;
}
.up {
grid-row: span 3;
}
.down {
grid-row: span 3;
border-bottom: 0px;
border-top: 5px solid #000;
;
}
.left,
.right {
grid-column: span 28;
}
.func:active,
.num:active,
.letters:active {
border-bottom: 5px inset #20252A;
background: #111;
}
.down:active {
border-bottom: 0px !important;
border-top: 5px inset #20252A;
background: #111;
}
<div class="wrapper">
<!-- first row -->
<div class="func">esc</div>
<div class="func">F1</div>
<div class="func">F2</div>
<div class="func">F3</div>
<div class="func">F4</div>
<div class="func">F5</div>
<div class="func">F6</div>
<div class="func">F7</div>
<div class="func">F8</div>
<div class="func">F9</div>
<div class="func">F10</div>
<div class="func">F11</div>
<div class="func">F12</div>
<div class="func">F13</div>
<!-- second row -->
<div class="num">~<br/>`</div>
<div class="num">!<br/>1</div>
<div class="num">#<br/>2</div>
<div class="num">#<br/>3</div>
<div class="num">$<br/>4</div>
<div class="num">%<br/>5</div>
<div class="num">^<br/>6</div>
<div class="num">&<br/>7</div>
<div class="num">*<br/>8</div>
<div class="num">(<br/>9</div>
<div class="num">)<br/>0</div>
<div class="num">-<br/>_</div>
<div class="num">+<br/>=</div>
<div class="num back">delete</div>
<!-- third row -->
<div class="letters tab"><i class="material-icons"></i></div>
<div class="letters">Q</div>
<div class="letters">W</div>
<div class="letters">E</div>
<div class="letters">R</div>
<div class="letters">T</div>
<div class="letters">Y</div>
<div class="letters">U</div>
<div class="letters">I</div>
<div class="letters">O</div>
<div class="letters">P</div>
<div class="letters">{<br/>[</div>
<div class="letters">}<br/>]</div>
<div class="letters">|<br/>/</div>
<!-- fourth row -->
<div class="letters caps">caps lock</div>
<div class="letters">A</div>
<div class="letters">S</div>
<div class="letters">D</div>
<div class="letters">F</div>
<div class="letters">G</div>
<div class="letters">H</div>
<div class="letters">J</div>
<div class="letters">K</div>
<div class="letters">L</div>
<div class="letters">:<br/>;</div>
<div class="letters">"<br/>'</div>
<div class="letters enter">enter<br/>return</div>
<!-- fifth row -->
<div class="letters left-shift">shift</div>
<div class="letters">Z</div>
<div class="letters">X</div>
<div class="letters">C</div>
<div class="letters">V</div>
<div class="letters">B</div>
<div class="letters">N</div>
<div class="letters">M</div>
<div class="letters">
<<br/>,</div>
<div class="letters">><br/>.</div>
<div class="letters">?<br/>\</div>
<div class="letters right-shift">shift</div>
<!-- sixth row -->
<div class="letters fn">fn</div>
<div class="letters">control</div>
<div class="letters">option</div>
<div class="letters left-command">⌘<br/>command</div>
<div class="letters space"></div>
<div class="letters right-command">⌘<br/>command</div>
<div class="letters">option</div>
<div class="letters left">←</div>
<div class="letters up">↑</div>
<div class="letters right">→</div>
<div class="letters down">↓</div>
</div>
The problem is the grid-column-gap you have set on the grid container.
.wrapper {
display: grid;
grid-template-columns: repeat(350, 1fr);
grid-template-rows: repeat(33, 1fr);
grid-gap: 4px; <----- PROBLEM HERE
grid-row-gap: 5px;
background-color: #a5adb0;
border-radius: 5px;
color: #ddd;
padding: 15px;
font-family: 'Muli';
}
When you set grid-gap: 4px, that is shorthand for:
grid-row-gap: 4px
grid-column-gap: 4px
(Incidentally, the grid-row-gap set in the shorthand is overridden with your next line of code.)
Now look at how many columns you have set:
grid-template-columns: repeat(350, 1fr)
Now multiply 350 * 4px. The minimum possible width of a grid row is 1400px.
For an illustration, set the container's width to 1400px and remove the padding: 15px. The grid items begin to overflow at 1399px.
If you disable grid-gap: 4px you'll see that your layout scales nicely without any overflow.
Depending on how you want to space the keys, you'll have to test different units on the column gaps, such as straight percentages (%) or viewport percentages (vh, vw, vmin, vmax, etc).
Or consider using less (wider) columns.