This is a nicely centered grid, but I want the 4 columns to go down to 2 for mobile. What should I add?
body {
display: grid;
align-items: center;
justify-items: center;
background: grey;
max-width: 56em;
}
ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 3em;
margin: 0 auto;
max-width: 64em;
}
li {
display: grid;
align-items: center;
justify-content: center;
list-style: none;
}
You have to add changes of css when the screen is narrow. Using:
#media screen and (max-width: ???px){}
And in the block you add rules like in normal css which should change when width of screen is less than given value. I suppose it will be enough for you to deal with this. If you need more information (e.g. new values) write comments and I will try to answer them.
Examples
Related
I am only beginning CSS and HTML so this is definitely a beginner question here. Below is a snippet of my current work:
/* Setup */
* {
box-sizing: border-box; /* Makes like box model work like I'd expect */
}
body {
font-family: 'Roboto', sans-serif;
}
/* Necessary Selectors */
#header {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto;
align-items: end;
}
.logo {
font-family: 'Rampart One', cursive;
font-size: x-large;
}
#header-img {
height: 25px;
}
#nav-bar {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 25px;
}
/* Media Query to change display based on screen width */
#media (max-width: 500px){
#nav-bar {
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(auto-fill, auto);
justify-items: center;
}
#header {
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(auto-fill, auto);
justify-content: center;
align-items: center;
}
}
The issue I am having is that in almost every ID Selector, I have to add display: grid. I am using grid as my main display, so I would like to not retype this. I've tried putting it in * and body selector, but this doesn't work as I expected. * breaks the webpage, and my selectors don't appear to inherit the display from body. Is there a better way?
Option 1 (recommended): Add a class to both #header and #nav-bar:
<header id="header" class="grid"></div>
<nav id="nav-bar" class="grid" aria-label="main navigation"></nav>
And then access the class in the CSS:
.grid {
display: grid;
}
Option 2: Use a comma to combine your CSS selectors:
#header,
#nav-bar {
display: grid;
}
<div class="container">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
.wrapper {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
align-items: space-around;
min-width: 300px;
height: 70vh;
background: whitesmoke;
}
#media screen and (min-width: 1100px) {
.container {
height: auto;
display: grid;
grid-template-columns: 1fr repeat(2, minmax(auto, 30rem)) 1fr;
background: pink;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column: 2/4;
justify-content: center;
background: cyan;
}
}
I've created a column that contains three circles in it, each stacked on top of the other in a column, which all looks fine when the screen is narrow. But when the browser is widened and I add a media query for when the screen gets wider than 1100px, I want the column of circles to flip to become a single row of circles.
But when I do this using CSS Grid, it doesn't work, and two circles appear on one row, and the third circle appears below the first circle on a second row. You can see it at https://codepen.io/HorrieGrump/pen/ZEKxJgv
I can get it to work if I use flexbox instead (as shown below) by swapping out the current .wrapper block in CSS and using this new one with flexbox, but I'd like to know if it's possible to use CSS Grid instead of flexbox to do this.
Can someone please let me know how to get the media query to flip the column into a single row using CSS Grid – and not have to resort to flexbox?
.wrapper {
display: flex;
flex-direction: row;
grid-template-columns: repeat(2,1fr);
justify-content: space-around;
align-items: center;
grid-column: 2/4;
background: cyan;
}
Edit your media query for .wrapper
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
grid-column: 2/4;
background: cyan;
}
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 1 year ago.
My posts are currently arranged like this:
.
HTML looks like this:
<div class="center">
<ul>
<li>
<p>[User] posted: [content] at [date] (likes: [likes]) </p>
<button>like</button>
<button>dislike</button>
</li>
</ul>
</div>
Here's the css:
.center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
li {
width: 20%;
display: inline-block;
list-style-type: none;
align-items: center;
align-content: center;
line-break: strict;
margin: 10px;
border-radius: 7px;
}
li p {
margin: 20px;
overflow-wrap: break-word;
}
Inspired by tumblr's design, how do I make it look more like this?
Considering how you re-ordered elements between your current result and the desired layout, CSS columns seem to be exactly what you're after.
For that to work, you column-containing element (which I assume is your ul) needs a limited height. Given you have applied a (min-)height, use this:
ul { columns: 4; column-gap: 20px; }
The kind of layout you're after is commonly called masonry layout. CSS already has a specification achieving this (see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout) but so far Firefox is the only browser that has support for it behind a flag. If you want to enable this experimental support, go to about:config in Firefox, and set layout.css.grid-template-masonry-value.enabled to true.
If you want to try that out, use
ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
gap: 20px;
}
Also compare https://caniuse.com/mdn-css_properties_masonry and https://caniuse.com/mdn-css_properties_grid-template-rows_masonry.
I'm using flex box to make a layout for my products list but when I try to set justify-content to be space-between it works well on 4 items scenario but for less items (2 or 3) the space between them grows so how I set the space between items to be the same regardless the number of items in the row?
.productsContainer {
background-color: $color_1;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.product {
flex-basis: 23%;
border: 1px solid $color_2;
display: flex;
flex-direction: column;
padding: 10px 15px;
margin-bottom: 20px;
}
Screenshot
justify-content: space-between;
will divide the remaining container space into equal width chunks between your elements, you can not set the spacing.
I would recommend trying the grid layout for this kind of card placement.
Something like this should do it:
.productsContainer {
background-color: $color_1;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 15px;
}
Change to:
justify-content: center;
and add gap property:
gap: 10px;
and play with the gap.
I'm not very familiar with CSS and thought I had hit the jackpot with CSS grid however I did not realise that it wasn't very compatible with IE11. I have run into a number of problems trying to fix the following code:
.my-grid-filters {
display: grid;
grid-auto-rows: minmax(50px, 50px);
grid-gap: 5px;
}
.my-grid-filters filter {
display: flex;
align-items: flex-end;
}
#media screen and (min-width: 40em) {
.my-grid-filters {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 5px;
}
.my-grid-filters filter:nth-child(1) {
grid-column: 1 / -1;
grid-row: span 2;
}
}
I ran it through the Autoprefixer online tool which produced the following:
.my-grid-filters {
display: -ms-grid;
display: grid;
grid-auto-rows: minmax(50px, 50px);
grid-gap: 5px;
}
.my-grid-filters filter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
#media screen and (min-width: 40em) {
.my-grid-filters {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 5px;
}
.my-grid-filters filter:nth-child(1) {
grid-column: 1 / -1;
-ms-grid-row-span: 2;
grid-row: span 2;
}
}
However this seems to stack all of the grid elements on top of each other. This article includes a lot of information but I'm struggling to apply it to my code.
It seems to suggest that I need to place each element in the grid manually but part of my use case for CSS Grid is that I don't know how many of the repeat elements might be on the screen at once as they are generated by iterative javascript. This also makes it difficult for me to apply separate div ids too them.
Any help would be appreciated