i want to make a automatic grid row, but i dont know hot to do that and i need to put grid-template-rows: repeat(10, 200px); i need to put repeat() to insert a new row whenever i need a new row, there's some way to turn it automatic
enter image description here
enter image description here
i thought to make a script to check it but i want a css way
*{
padding: 0;
border: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
}
html, body{
width:100%;
height: 100%;
}
body *{
border: 1px solid rgb(21, 20, 20);
}
.grid{
width:100%;
height:100%;
display:grid;
grid-template-rows: 4.375rem calc(100% - 4.375rem);
grid-template-columns: 1fr;
}
.header{
}
.container{
display:grid;
grid-template-columns:14% 1fr;
}
.offers{
}
.content{
padding:10px;
display:grid;
grid-template-columns: 2fr 1fr 1fr 2fr;
grid-template-rows: repeat(10, 200px);
gap: 10px;
overflow: auto;
}
.card{
}
.card:nth-of-type(7n+4){
background-color: blue;
grid-row: span 2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<title>Document</title>
</head>
<body>
<div class="grid grid-template">
<header class="header"></header>
<div class="container">
<aside class="offers"></aside>
<section class="content">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</section>
</div>
</div>
</body>
</html>
Related
I'm building a chat application (imagine WhatsApp Web) where I have a scrolling content of messages and where always an input field is visible at the bottom.
For the sake for this question, I simplified the desired working behavior to this snippet:
<html lang="en" style="height: 100%">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="height: 100%; margin: 0">
<div
style="
display: grid;
height: 100%;
grid-template-rows: [messages] 1fr [input] 50px;
"
>
<div style="grid-row-start: messages; overflow-y: auto">
<div style="height: 1000px; width: 100px; background-color: red">
messages
</div>
</div>
<div style="grid-row-start: input; background-color: yellow">input</div>
</div>
</body>
</html>
In the example above, the content is scrollable and the yellow bar is always visible.
But as soon as the design is getting more complex (more layout around, also using CSS grids) the yellow bar is pushed down. So far, I could not figure out the reason for it. Here is an example with a surrounding grid:
<html lang="en" style="height: 100%">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="height: 100%; margin: 0">
<div style="display: grid; height: 100%; grid-template-rows: [chat] 1fr"><!--<--added level-->
<div style="grid-row-start: chat; height: 100%">
<div
style="
display: grid;
height: 100%;
grid-template-rows: [messages] 1fr [input] 50px;
"
>
<div style="grid-row-start: messages; overflow-y: auto; height: 100%">
<div style="height: 1000px; width: 100px; background-color: red">
messages
</div>
</div>
<div style="grid-row-start: input; background-color: yellow">
input
</div>
</div>
</div>
</div>
</body>
</html>
I tried to pass down the 100% height down but it didn't help either for the nested case. I also tried to use 100vh.
My goal is to avoid using calc() to reduce complexity and I also can't use a fixed height for the "messages" part.
Any ideas what I'm missing?
Just change the style of the first div after the body from: grid-template-rows: [chat] 1fr; to grid-template-rows: [chat] 100%; :
<html lang="en" style="height: 100%">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="height: 100%; margin: 0">
<div style="display: grid; height: 100%; grid-template-rows: [chat] 100%"><!--<--added level-->
<div style="grid-row-start: chat; height: 100%">
<div
style="
display: grid;
height: 100%;
grid-template-rows: [messages] 1fr [input] 50px;
"
>
<div style="grid-row-start: messages; overflow-y: auto; height: 100%">
<div style="height: 1000px; width: 100px; background-color: red">
messages
</div>
</div>
<div style="grid-row-start: input; background-color: yellow">
input
</div>
</div>
</div>
</div>
</body>
</html>
Trying to use grid for layout and I'd like to have different behavior between smaller and larger viewports. On larger viewports I want some content to be shown in a sidebar and tried using grid for this.
How can I prevent the overlapping of the First Card and Second Card when using grid-area like this?
.grid {
display: grid;
grid-template-columns: 10rem 1fr;
grid-column-gap: 1rem;
grid-template-areas:
"sidebar main"
;
max-width: 40rem;
margin: 10rem auto;
border: 1px solid gray;
}
.cards {
grid-area: main;
}
.card {
border: 1px solid red;
padding: 1rem;
}
.sidebar-content {
border: 1px solid green;
padding: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="grid">
<div class="cards">
<div class="card">
First card
</div>
</div>
<div class="sidebar-content">
Sidebar Content
</div>
<div class="cards">
<div class="card">
Second card
</div>
<div class="card">
Third Card
</div>
</div>
</div>
</body>
</html>
I figured out something that works.
.grid {
display: grid;
grid-template-columns: 10rem 1fr;
grid-column-gap: 1rem;
grid-template-areas:
"sidebar first-quote"
"sidebar quotes"
;
max-width: 40rem;
margin: 10rem auto;
border: 1px solid gray;
}
.second-row {
grid-area: quotes;
}
.first-row {
grid-area: first-quote;
}
.card {
border: 1px solid red;
padding: 1rem;
margin-bottom: 1rem;
}
.sidebar-content {
border: 1px solid green;
padding: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="grid">
<div class="first-row">
<div class="card">
First card
</div>
</div>
<div class="sidebar-content card">
Sidebar Content
</div>
<div class="second-row">
<div class="card">
Second card
</div>
<div class="card">
Third Card
</div>
</div>
</div>
</body>
</html>
Hi Im trying to create responsive column with the behaviour.
The width of the column can go between 335px or 540px.
But when i use grid-template-columns: repeat(auto-fit, minmax(335px, 540px)) it seems only the 540px is taken into consideration.
Like if there is 700px available, i would like 3 items laid out in 2 columns.
.box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(335px, 540px));
grid-gap: 10px;
row-gap: 10px;
}
.item {
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>
Consider max-width on your elements instead and use 1fr inside the minmax()
.box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
grid-gap: 10px;
}
.item {
background: red;
max-width: 540px;
}
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
I have grid section that has a grid-template-column for 3 columns. But this content is loaded dynamically so it has 2 columns sometimes. I am trying to center the columns when there is only 2 columns
I checked the documentation of the grid CSS and tried a lot of different CSS but nothing seems to work as I would like to.
.wrapper {
grid-template-columns: repeat(3,1fr);
display: grid;
align-items: stretch;
}
.items {
display: block;
}
Is this the behavior you were expecting?
More about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
justify-content: center;
}
/* Addition styling */
.parent {
padding: 30px;
background: lightgrey;
opacity: 0.8;
}
.child {
padding: 30px;
text-align: center;
background: black;
margin: 10px;
color: white;
max-width: 300px;
}
<div class="parent">
<div class="child">Column</div>
<div class="child">Column</div>
</div>
<hr>
<div class="parent">
<div class="child">Column</div>
<div class="child">Column</div>
<div class="child">Column</div>
</div>
<hr>
<div class="parent">
<div class="child">Column</div>
<div class="child">Column</div>
<div class="child">Column</div>
<div class="child">Column</div>
</div>
.grid-container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-column-gap: 50px;
grid-row-gap: 50px;
justify-content: center;
align-content: center;
}
.grid-container div {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>
I want to write 2048 game using divs and css-grid. This is how I imagine the output:
I have the outer part, which fits to the browser window, and I just want to write 4x4 grid in the middle (horizontal and vertical) of the middle-left div (called game-container)
<div class = "game-container">
<div class = "game">
<div class = "game-cell"></div>
<!-- 16 game cells total -->
<div class = "game-cell"></div>
</div>
</div>
I made a 4x4 grid using:
div.game {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}
However, I have a problem with few things:
How to make each game-cell square (lets say 50px)
How to display a number in the middle of a game-cell
How to make divs touch each other
I can make each one of this, but not all at once.
Moreover, how to display game div in the middle (as in the picture) of the game-container div.
PS. I don't mind using some Bootstrap if it simplifies something.
Some info concerning outer container:
html, body, div.container{
height: 100%;
margin: 0;
padding: 0;
}
div.container {
display:grid;
grid-template-rows: 3fr 9fr 2fr;
grid-template-columns: 3fr 5fr;
grid-gap: 2px;
background-color: yellow;
}
use flexbox to acheive it outside grid.
div.game {
display: grid;
width: 50vw;
height: 50vh;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
width: 120px;
height: 120px
}
.game-cell {
width: 30px;
height: 30px;
border: 1px solid ;
box-sizing: border-box;
}
.left-half{
width: 50vw;
height: 100vh;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
body{
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class = "game-container">
<div class="left-half">
<div class = "game">
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
<div class="game-cell"></div>
</div>
</div>
</div>
</body>
</html>
Add this to your .game-container css
display: flex;
align-items: center;
justify-content: center;
.game {
display: grid;
width: 120px;
height: 120px;
border:1px solid black;
}
.game-container{
height: 500px;
width: 500px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
}
<div class = "game-container">
<div class = "game">
</div>
</div>
Here is the complete solution combined using answers and comments from comunity.
html, body, div.container{
height: 100%;
margin: 0;
padding: 0;
}
div.container {
display:grid;
grid-template-rows: 3fr 9fr 2fr;
grid-template-columns: 3fr 5fr;
grid-gap: 2px;
background-color: yellow;
}
div.container > div {
background-color: #99c2ff;
}
div.header {
grid-column: 1/3;
grid-row: 1/2;
}
div.game-container {
display: flex;
grid-column: 1/2;
grid-row: 2/3;
text-align: center;
}
div.menu {
grid-column: 2/3;
grid-row: 2/3;
}
div.footer {
grid-column: 1/3;
grid-row: 3/4;
}
div.game {
display: grid;
grid-template-columns: repeat(4, 80px);
grid-template-rows: repeat(4, 80px);
margin: auto;
}
div.grid-cell {
display: flex;
border: 1px solid rgba(0, 0, 0, 0.8);
font-size: 20px;
background-color: #e6f0ff;
}
div.value-cell {
margin: auto;
}
h1, h2, h3, h4 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>2048</title>
</head>
<body>
<div class="container">
<div class="header">
<h3>Title</h3>
</div>
<div class = "game-container">
<div class = "game">
<!-- <div class="grid-row"> -->
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<!-- </div> -->
<!-- <div class="grid-row"> -->
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell">2</div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<!-- </div> -->
<!-- <div class="grid-row"> -->
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell">16</div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<!-- </div> -->
<!-- <div class="grid-row"> -->
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell">1024</div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<!-- </div> -->
</div>
</div>
<div class="menu">
<p>Some info</p>
</div>
<div class="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>