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
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;
}
Original Code
section.new-features {
.new-features-right-col {
.wrapper-newfeatures {
margin-top: 3em;
display: grid;
grid-template-columns: auto auto auto auto auto auto;
grid-column-gap: 31px;
grid-row-gap: 30px;
}
}
Media Query
section.new-features {
.wrapper-newfeatures {
display: grid;
grid-template-columns: auto;
grid-gap: 2em;
width: 90%;
}
}
}
Problem
I'm having difficulties overriding CSS Grid Properties within my media query section. Whenever I set the grid-template-columns: auto; which is only suppose to use one (1) grid column it gets overridden by the original code and uses six columns. I tried to troubleshoot this by using a ancestor element by typing body behind the CSS class but this doesn't seem to work. If anyone could assist me with this problem or help me approach this, it would be highly appreciated!
I'm building my first real webpage and I'm trying to figure out how to stack the elements on the home screen correctly. I've read and tried similar posts but they don't seem to do what I need. Currently my homepage looks like this (ignore the list at the bottom of the page and subscribe/ login buttons. They are just part of the default theme):
This was achieved using the following code:
HTML:
<div class="desc-pic-parent">
<div class="homepage-description">
<div class="homepage-description-header">
Hi! I'm Lewis Cooper
</div>
<div class="homepage-description-text">
This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
</div>
</div>
<div class="square-pretend-img"></div>
</div>
CSS:
#media (min-width: 1001px) {
.disc-pic-parent {
grid-column: 1 / span 3;
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description{
text-align: left;
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description-header{
font-size: 3rem;
margin-top: 0;
}
.square-pretend-img{
position: relative;
height: 20rem;
width: 20rem;
background-color: #555;
grid-column: 2 / span 2;
}
}
My goal is to try and get it to look something like this sketch:
The idea of using a grid for the main layout is fine and will keep your text at a constant width even if it is too long, but you also have put a grid in your left hand box which isn't the layout your desired image shows. You have also given the img defined dimensions and yet defined column spans for the grid.
This snippet just takes it that you want the img to have the given dimensions so removes the extra grid information.
#media (min-width: 1001px) {
.desc-pic-parent {
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description {
text-align: left;
min-height: 280px;
border-top: 0;
}
.homepage-description-header {
font-size: 3rem;
margin-top: 0;
}
.square-pretend-img {
position: relative;
height: 20rem;
width: 20rem;
background-color: #555;
}
}
<div class="desc-pic-parent">
<div class="homepage-description">
<div class="homepage-description-header">
Hi! I'm Lewis Cooper
</div>
<div class="homepage-description-text">
This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
</div>
</div>
<div class="square-pretend-img"></div>
</div>
NOTE: you probably want to take some of the styling out of the media query and have it there for all viewport dimensions.
This can be simply achieved using flexbox.
Just wrap those two div's inside another div and give display: flex to that div.
I have created a page to display posts in two columns However, I noticed that after 2 posts for every alphabet, there is spacing for 3rd post display
Here is the code I used:
For main right column:
.column {
float: left;
padding: 10px 0;
}
For internal 2 columns within that main right column:
.insideleft {
width: 50%;
padding: 10px 25px 15px 0px;
}
It is coming from the fact that the 1st article is higher thant the 2nd to the 3rd goes under the smaller one 1st as it always give priority to the the closest to the top.
One way to go would be to use display: flex:
.column.right{
display: flex;
flex-wrap: wrap;
}
Another way to go would be to use display:grid:
.column.right{
display:grid;
grid-template-colmuns: repeat(2, 1fr);
}
.column.right > .insideleft {
width: 100%;
}
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