I'm trying to achieve this layout with flexbox:
Is it possible with flexbox? I can't wrap these in separate sections at the moment, so it's just a huge list like so:
<li>2x2</li>
<li>1x1</li>
<li>1x1</li>
<li>1x1</li>
<li>1x1</li>
<li>1x1</li>
<li>1x1</li>
Any input would be greatly appreciated
If anyone finds this question, too: It was answered here and I successfully implemented it using CSS Grid. The trick is to scale all elements for the "small" grid and manually enlarge to first one to use two rows and two columns.
JSFiddle Example for 6 columns and 3 rows
grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-auto-rows: 50px;
grid-gap: 10px;
}
grid-item:first-child {
grid-column: 1 / 4;
grid-row: 1 / 3;
}
grid-item {
background-color: red;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
answer on stack overflow
Related
I'm creating a Worldle clone and am trying to figure out how to get my word grid and its box elements to shrink in response to the change in height of the window. I tried messing around with different flex properties instead of using grid, but nothing seemed to get me the outcome I was looking for.
You can see the effect I am looking to recreate here by messing with the height of your window.
This is the css code I have now, where grid is reference to the grid containing the box elements.
.grid {
display: grid;
grid-template-columns: repeat(5, 30px);
grid-template-rows: repeat(5, 30px);
justify-content: center;
column-gap: 50px;
row-gap: 40px;
margin-bottom: 50px;
}
.box {
border-style: solid;
border-color: blue;
height: 4rem;
width: 4rem;
margin-bottom: 30px;
}
Recently I have started learning CSS Grid. I am currently working on a landing-page section that consists of 6 rows and 9 columns. I have two elements that should fill out this section.
What have I tried to fix the issue:
I googled the issue and read about functionality such as "3 / span 2" to choose a starting position.
I tried the grid-column-start method, starting from Auto, 0 and 1.
My HTML
<div class="landing-page">
<div class="container">
<div class="landing-page-item image">Image</div>
<div class="landing-page-item text">Text Here</div>
</div>
</div>
My SCSS
.landing-page {
height: 100vh;
width: 100vw;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
box-shadow: 0 12px 21px #7889b6;
.container {
padding-top: 100px;
display: grid;
height: 100%;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(9, 1fr);
grid-column-start: 1;
}
}
.landing-page-item {
display: flex;
justify-content: center;
align-items: center;
&.image {
grid-row: span 4;
grid-column: span 2;
background-color: green;
}
&.text {
grid-row: span 4;
grid-column: span 6;
background-color: red;
}
}
What I expected to happen:
Image start at the most top-left grid and fills out 2 columns and 4 rows.
Text starts right next to the Image and fills out 6 columns and 4 rows.
What actually happens:
The image fills out two columns to display the error in a clearer way. What have I done wrong?
I looked at what outside sources could interfere with it. It turns out that clearfix.less:14 added a css attribute: content: " "; This is seemingly done to provide a Clearfix. I renamed my container to main-content and the issue was solved.
This question already has an answer here:
Why display grid with 100% in grid-template-columns goes out of body?
(1 answer)
Closed 2 years ago.
I have a grid that is causing a horizontal scroll bar I do not want, I have tried several things including putting my grid inside other divs. Here is the code in css for the grid.
.page-grid {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: 60% 40%;
grid-template-areas:
"ONE TWO"
"THREE THREE"
;
align-items: center;
justify-content: center;
text-align: center;
grid-gap: 20px;
margin-top: 70px;
background: White;
max-width:100%;
box-sizing: border-box;
}
With grid-template-columns: 60% 40% you already say that the whole width is supposed to be used. Adding grid-gap: 20px extends it even further, causing the horizontal scroll bar.
Instead you can write grid-template-columns: 3fr 2fr
fr stands for fractions and has basically the same effect, except of not causing the extra pixels needed. It will adjust all the spacing of the grid-gap automatically.
.fractions {
display: grid;
grid-template-columns: 3fr 2fr;
grid-gap: 20px;
margin-bottom: 30px;
}
.grid-element {
height: 80px;
background: #00ff00;
}
<div class="fractions">
<div class="grid-element"></div>
<div class="grid-element"></div>
</div>
Need to render a grid as like table format, for example i have two rows initially followed by below css:
Step 1:
.grid-container {
display: grid;
grid-template-columns: auto;
background-color: #2196F3;
padding: 10px;
}
output:
I dynamically added one more column, but it render like below its correct only but i need row wise render the coloumn any tricky is there in css. please guide what is way to achieve.
i have one idea, that is based on order will render the grid like any other option to render,
step 2:
.grid-container {
display: grid;
grid-template-columns: auto auto;
background-color: #2196F3;
padding: 10px;
}
Output:
I expected like below:
You need to set grid-auto-flow to column and then change grid-template-columns to grid-template-rows (because you are filling the grid column-wise now).
In other words, try this in your CSS:
.grid-container {
display: grid;
grid-auto-flow: column;
grid-template-rows: auto auto;
background-color: #2196F3;
padding: 10px;
}
There's a JSFiddle at https://jsfiddle.net/h8qm5sku/3/ in case that helps
I'm trying to make a grid column span every row, including implicit rows.
I came across this question asking how to span all grid rows. The second answer has a correction stating a better solution. This seems like it would work, but my own example, and the comments on the second answer, indicate that it doesn't work.
The W3 spec gives this a very close example as well.
Is there something wrong with my code, or is this possibly a bug in Firefox, Chrome, and Safari?
I also have this example in a CodePen here.
* {
box-sizing: border-box;
}
.container {
border: 1px solid #666;
max-width: 1000px;
padding: 10px;
display: grid;
grid-template-columns: 150px 1fr 300px;
/* grid-template-rows: repeat(auto) [rows-end]; Doesn't seem to help */
/* grid-template-rows: [rows-start] repeat(auto) [rows-end]; Doesn't seem to help */
grid-template-rows: repeat(auto);
grid-gap: 10px;
margin: 10px auto;
grid-auto-flow: row dense;
/* justify-items: stretch; */
/* align-items: stretch; */
}
.container>* {
grid-column: 2 / 3;
padding: 10px;
outline: 1px solid #666;
}
.pop {
grid-column: 1 / 2;
/* grid-column: 1 / -1; If I switch to this, this div will span the full width of the grid, which is exactly what I'm trying to do with rows*/
}
.tertiary {
grid-column: 1 / 2;
}
.secondary {
grid-column: 3 / 3;
grid-row: 1 / -1;
/* Doesn't work */
/* grid-row: rows-start / rows-end; Doesn't work */
/* grid-row: 1 / rows-end; Also doesn't work */
/* grid-row: 1 / span 7; This works, but I need to span an unknown number of rows*/
/* grid-row: 1 / span 99; This is gross and creates 99 rows */
}
<div class="container">
<div class="secondary">Secondary - why doesn't this span all the way to the bottom of the grid?</div>
<div class="tertiary">Tertiary</div>
<div class="tertiary">Tertiary</div>
<div class="tertiary">Tertiary</div>
<div>Primary</div>
<div>Primary</div>
<div>Primary</div>
<div class="pop">Span tertiary and primary</div>
<div>Primary</div>
<div class="tertiary">Tertiary</div>
<div>Primary</div>
<div>Primary</div>
</div>
There are two obstacles in your way.
First, this line of CSS code in your .container rule:
grid-template-rows: repeat(auto);
This code is invalid. The argument in the repeat() notation must begin with a positive integer, which specifies the number of repetitions. You don't have that, so the code doesn't work. More details in the spec.
Second, even if the code above was correct, let's say:
grid-auto-rows: auto; (which happens to be the default setting anyway)
Your column would still not span all rows.
This is because, as you may have seen in the other answer you cited, a track definition can be set to cover all perpendicular tracks only in the explicit grid.
So this would work:
grid-template-rows: repeat(6, auto);
revised demo
The rest of the problem is covered in detail in the other answer you cited.