.grid {
display: grid;
grid-template-columns: 80% 20%;
}
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item-special"></div>
<div class="grid-item-special"></div>
</div>
So far the above is straight forward, each row will contain two columns with respective widths of 80% and 20%
However I wish to adapt the above to make it responsive. On smaller screens any div with class "grid-item" will occupy 100% of the width (so each row will contain one column)
The above is not a problem, however further to the above I want any div with the class "grid item-special" to occupy 50% of the width.
The image shows what I am attempting to accomplish:
I need to avoid changing the html markup if possible.
Any ideas would be welcomed.
You can create media query and change grid on smaller screen
.grid {
display: grid;
grid-template-columns: 80% 20%;
text-align: center;
}
.grid-item, .grid-item-special{
border: 1px solid black;
}
#media (max-width: 400px) {
.grid {
grid-template-columns: auto;
}
.grid-item {
grid-column: span 2;
}
}
<div class="grid">
<div class="grid-item">11</div>
<div class="grid-item">11</div>
<div class="grid-item-special">22</div>
<div class="grid-item-special">22</div>
</div>
Related
I was searching a way to make a responsive design like so
I have 3 divs inside a parent div
<div style="display: flex">
<div class="logo">some image here</div>
<div class="menu-items">
Home
...
</div>
<div class="login-logout">Here is the login component</div>
</div>
How can I make a responsive version of this to be something like this using only css and sass?
<div style="display: flex; flex-direction: column">
<div style="display: flex">
<div class="logo">some image here</div>
<div class="login-logout">Here is the login component</div>
</div>
<div class="menu-items">
Home
...
</div>
</div>
I want the middle div to stay bellow the other two
I have a guess that this can be possible using grid layout, but honestly I don't understand very much about it and prefer using flex. So if this could be achieved using flex I would be very much appreciated
Edit:
An image of how I want the layout to be.
flex is basically one dimensional whereas grid allows layout in two dimensions.
This snippet takes your code but sets the container to display grid.
grid-template areas are laid out for the wider screens in the ratio 2/3/1 and in the narrower ones in the ratio 2/1 in the top line.
Obviously you'll want to set the relative sizes suitable for your particular case.
.container {
width: 100vw;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-areas: 'logo logo menu menu menu login';
gap: 2vw;
padding: 2vw;
box-sizing: border-box;
}
.container>* {
border: 3px solid;
box-sizing: border-box;
}
#media (max-width: 768px) {
.container {
grid-template-columns: repeat(3, 1fr);
grid-template-areas: 'logo logo login' 'menu menu menu';
}
}
.logo {
grid-area: logo;
}
.menu-items {
grid-area: menu;
}
.login-logout {
grid-area: login;
}
/* borders added fordemo */
.logo {
border-color: red;
}
.menu-items {
border-color: blue;
}
.login-logout {
border-color: green;
}
<div class="container">
<div class="logo">some image here</div>
<div class="menu-items">
Home ...
</div>
<div class="login-logout">Here is the login component</div>
</div>
I'm trying to create a CSS grid with the following properties:
The grid has a width of 100%
The column's width should be 330px, but should shrink if this allows fitting one more column, but it should never shrink below 288px.
All columns should have the same width
If there is space left, left-align the columns (all remaining space should be on the right side of the grid)
Here a few examples of what I'm trying to achieve
Grid width => columns (width)
----------------------------
658px => |329px|329px|
|329px|
660px => |330px|330px|
|330px|
665px => |330px|330px|5px(whitespace)|
|330px|
863px => |330px|330px|203px(whitespace)|
|330px|
864px => |288px|288px|288px|
867px => |289px|289px|289px|
960px => |320px|320px|320px|
I've tried the following three options:
Approach 1
.grid {
grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
The problem: The columns shrink down to 288px, but they can grow larger than 330px Image with columns larger than the max width
Approach 2
.grid {
grid-template-columns: repeat(auto-fill, minmax(288px, 330px));
}
The problem: the columns never grow, and the columns are left-aligned, but they are always 330px and never shrink down to 288px. Image with columns that don't shrink below the max width
Approach 3
.grid {
grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
.grid > div {
max-width: 330px;
}
The problem: The columns shrink down to 288px, and they never grow larger than 330px, but they are not left-aligned. Image with columns that grow and shrink within boundaries, but are not left-aligned
As you can see, none of the approaches I've tried worked so far. All of them have different problem :( Is there any way to make this layout work with CSS Grid?
This should work, placing it only on the .wrapper - note I did force and exception on a column (.three) to show the effect of that. I used smaller values to accommodate this results execution window
.my-container {
width: 100%;
border: solid green 1px;
padding: 3px;
}
.wrapper {
border: solid cyan 1px;
padding: 3px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100px, 150px), 1fr));
gap: 0.25rem;
}
.thing {
border: solid 1px magenta;
}
.three {
width: 40px;/* to show test of this */
border: solid lime 1px;
}
<div class="my-container">
<div class="wrapper">
<div class="thing one">One comes before two but is a lonely number</div>
<div class="thing two">Two burgers are more than one burger</div>
<div class="thing three">Three</div>
<div class="thing four">Four is the next block of super interesting content with more very happy text.</div>
<div class="thing five">Five test of the test</div>
<div class="thing six">Six</div>
<div class="thing seven">Seven</div>
<div class="thing ">Eight</div>
<div class="thing ">More</div>
<div class="thing ">And More</div>
<div class="thing ">More so more</div>
<div class="thing ">More again</div>
</div>
</div>
i created .container with some color & in that container header with some other color and text. now i want to center text. i am able to do that with grid but problem is my header color (background color of header) shrink to vertically and horizontally center too. i want only text to get in center not the color. hope i explained clearly. plz explain me how i can achieve that.
(
i am using visual studio. align-item align-content align-self(on header)justify-item,content,self nothing working for me plz clear my confusion
i need only text in center if i put image or logo that in center. i dont want background image to be compromise and i wanna use grid only.
i tried 6 grid commands align-item align-content align-self(on header)justify-item,content,self nothing working for me plz clear my confusion.
i am using visual studio. align-item align-content align-self(on header)justify-item,content,self nothing working for me plz clear my confusion
<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</div>
</div>
</div>
To center element on the grid and avoid them to shrink, you will need to set again a grid system on your children You can use flex or grid .
examples (might not be your grid, but needed a base that you did not provide, if that does not answer your question then, please, clarify your question)
Flex can be used on the grid children to allow centering alignement.
.container> div {
display:flex;
align-items:center;
justify-content:center;
background:tomato;
border:solid;
}
/* reconstruction of a grid */
.container {
display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows: minmax(150px,1fr);
grid-gap:1em;
}
.container .header, .container .footer {
background:lightblue;
grid-column:span 4;
}
.small-box-1 {
grid-column:2;
}
.main-content{
grid-column:2 / span 3
}
.side-bar {
grid-column:1;
grid-row:2 / span 2;
}
<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</div>
</div>
Grid can also be used on the grid children to allow centering alignement.
.container>div {
display: grid;
align-items: center;
justify-content: center;
background: tomato;
border: solid;
}
/* reconstruction of a grid */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(150px, 1fr);
grid-gap: 1em;
}
.container .header,
.container .footer {
background: lightblue;
grid-column: span 4;
}
.small-box-1 {
grid-column: 2;
}
.main-content {
grid-column: 2 / span 3
}
.side-bar {
grid-column: 1;
grid-row: 2 / span 2;
}
<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</div>
</div>
I have a CSS grid, say of 3 columns, with parent container located in the middle column, can I somehow expand child to take all three columns? In my code below I want the image area took all three columns, while text took just one:
.grid {
display: grid;
width: 100%;
grid-template-columns: 10% 1fr 10%;
}
.content {
grid-column: 2/3;
}
.image-area {
grid-column: 1/4;
color: #6dae72;
}
<div class="grid">
<div class="content">
<div class="text-area">Some text</div>
<div class="image-area">The picture</div>
</div>
</div>
Would appreciate any help.
I'm trying to create a CSS Grid which centers all its items both horizontally and vertically and maintains a background which takes up the whole grid.
To do this, I am first creating CSS for each item which looks something like this:
.item1 {
grid-area: header;
background:yellow;
text-align: center;
align-items: center;
display: grid;
}
The only difference between each item is its item number (in the class), the grid-area name, and the background color. I added display: grid; because without it I can't seem to both center and have the background color cover the whole grid. I don't understand why this is, but it seems to work.
My container CSS looks like this:
.container {
display: grid;
grid-template-columns: 20vw 20vw 20vw 20vw;
grid-template-rows: 25vh 25vh 25vh;
grid-template-areas:
"header header header header"
"main main subg sidebar"
"footer footer footer footer";
}
Now when I create the grid everything looks the way I want it to:
<div class="container">
<div class="item1"><H1>Header</H1></div>
<div class="item2">Main</div>
<div class="item3">Sidebar</div>
<div class="item4">Footer</div>
<div class="item5">X</div>
</div>
Now I want to achieve the exact same effect in the central item. So first I create nearly identical CSS tags for the sub-items and sub-containers. The only differences are in the naming and changing the dimensions from absolute screen based (vh/vw) to percentages:
.sub_item1 {
grid-area: header1;
background:yellow;
text-align: center;
align-items: center;
display: grid;
}
...
.sub_container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 33% 33% 33%;
grid-template-areas:
"header1 header1 header1 header1"
"main1 main1 subg1 sidebar1"
"footer1 footer1 footer1 footer1";
}
I nest the sub-container in the center item in the top-level container:
<div class="container">
<div class="item1"><H1>Header</H1></div>
<div class="item2">Main</div>
<div class="item3">Sidebar</div>
<div class="item4">Footer</div>
<div class="item5 sub_container">
<div class="sub_item1">Header</div>
<div class="sub_item2">Main</div>
<div class="sub_item3">Side</div>
<div class="sub_item4">Footer</div>
<div class="sub_item5">X</div>
</div>
</div>
I have created a fiddle to demonstrate how it fails. The sub-container does not stretch the background color to fit the cells like the top-level does.
I tried changing the dimensions to screen based (e.g. 5vw, 11vh) and this does not work either.
Remove the "item5" class from the sub-container div.
<div class="sub_container">
Here is the updated fiddle.