I am using display:grid and grid-template-columns for a div in my html page. Using media queries I am updating the number of columns in each row for this grid.
#media screen and (min-width: 200px) and (max-width:767.5px){
.options-container {
display: grid;
grid-template-columns: 100%;
}
}
#media screen and (min-width: 768px) {
.options-container {
display: grid;
grid-template-columns: 48% 48%;
column-gap: 4%;
}
}
Based on the above code, it shown one column upto 767.5px and once we cross 768px it shows 2 columns per row. All this code is working as expected.
But when the parent div width is reduced to 200px, since the screen size is still 768px it shows 2 columns per row. At this point since the parent div width is 200px I want to show only one column per row.I understand the media queries will not work since it is based on the width of the device and not the parent div. Can you please let me know how I achieve the functionality of updating number of columns per row in the grid based on parent div.
Related
I am creating a calendar layout in Ruby on Rails and each day box should have equal height regardless of how many events there are per day. This is the CSS I currently have. How can I fix the height of each box to a certain size?
.calendar-container {
display: grid;
grid-template-columns: repeat(7, 200px);
}
.day-calendar-item {
background-color: #f4fcff;
border-width: 2px;
}
I believe you need the grid-template-rows property. Try to add grid-template-rows: repeat(x, 200px) to the .calendar-container class where x is the number of rows you want and 200px is the size of each row (although you can change this to your preference).
I am developing a website with a centered layout, i.e. a 3 column grid with the websites content in the middle column (50%) and a 25% empty columns to the left an right.
So far, it looks pretty good in a full-sized browser. However, if I reduce the browser window's size (or use a mobile viewport) the 25% columns remain to use space. Is there a possibility by which in smaller environments the 25% columns gradually reduce their size to zero?
Or is the grid-approach bad?
Try #media (Mozilla CSS - media).
#media (min-width: 576px) {
.col1 {...}
.col2 {...}
.col3 {...}
}
#media (min-width: 768px) {
.col1 {...}
.col2 {...}
.col3 {...}
}
I am working on an Image-Gallery-Widget where the user can set a thumbnail width, thumbnail height and margin (between thumbnails) and the widget will present all image-thumnails in a nice grid where each image has the same width and height.
I am wondering whether css-flexbox or css-grid makes this possible without the need to define rows and columns in code and without the need for breakpoints/media-queries.
Thumbnail-Images are wrapped in an anchor, so a gallery item (or grid-item) will look something like this:
<a href="#" class="gallery-item">
<img src="myimage" width="300" height="200" />
</a>
The gallery items should fully fill the container div, which means, there should not be a gap between the last thumbnail in a row and the container div's right edge (except if we don't have enough items to fill the row i.e. when 3 items ft in a row, but we only have 8 items, then the 3rd row will only have 2 items and a gap to the right which is as wide as one item).
Gallery items can never be wider than the thumbnail-width the user set, because we don't want to degrade the quality of the thumbnails. Let's assume 300px width for this example. The margin between gallery items is fixed and set by the user. If there are not enough items left to fill a row, simply left align them i.e. like so:
I do not want to define any breakpoints in CSS nor add any html for row/column constructs. I want the browser to simply place as much gallery items side by side as fit into the container. If there's a gap on the right (ie 3 thumbnails * 300px width = 900px, but container is 1000px wide), the browser should scale down the grid items, so that one more gallery item will fit in and thus eliminate the gap. I need to be able to define a margin around each gallery item.
You can see the desired responsive behaviour (when changing the browser width) in this gif:
What you see in the gif is done without flexbox but needs a ton of CSS which I was hoping to avoid with flexbox. I have researched flexbox quite some bit, but haven't been able to get my head around it fully just yet.
Thanks for any tips!
Using flex capabilities should be sufficient for your task. Be aware of partial support in IE11: http://caniuse.com/#feat=flexbox.
Put these styles on your container:
.gallery {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-between;
}
Styles for wrappers:
.gallery a {
flex-grow: 1;
flex-basis: 125px;
max-width: 300px;
margin: 5px;
}
Styles for images:
.gallery img {
height: 100%;
width: 100%;
}
Space between images can be simply defined using margin.
In order to preserve image ratio you can use for example links (<a>) as a wrappers for images (<img>).
Furthermore, in order to prevent enlarging images, you can apply flex-grow, flex-basis and max-width attributes on anchors.
There was also a problem with stretching images in the last row - hack for that is to put n - 1 (where n is number of images) empty items inside container.
Setting width and height to 100% on the images enforces them to grow automatically up to the width defined by max-width attribute, while maintaining aspect ratio.
Please check the working example:
FIDDLE
If you don't mind using media breakpoints, use new CSS Grid Layout.
Don't forget to prefix it for IE10+ support.
Grid:
.gallery {
display: grid;
grid-gap: 5px;
}
Responsive images:
.gallery img {
width: 100%;
}
Media breakpoints (values taken from Bootstrap 4)
#media (max-width: 575.98px) {
.gallery {
grid-template-columns: repeat(1, 1fr);
}
}
#media (max-width: 768.98px) and (min-width: 576px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
#media (max-width: 991.98px) and (min-width: 768px) {
.gallery {
grid-template-columns: repeat(3, 1fr);
}
}
#media (max-width: 1199.98px) and (min-width: 992px) {
.gallery {
grid-template-columns: repeat(4, 1fr);
}
}
#media (min-width: 1200px) {
.gallery {
grid-template-columns: repeat(5, 1fr);
}
}
jsFiddle
I have a website with all content centered. The content has a width of 500px.
I'm only concerned about the content (the 500px) to be visible, how much of the gutter doesn't matter.
For desktop displays I have the following CSS rules:
margin: 0 auto;
width: 500px;
What should be applied so that the content area gets displayed in it's entirety on as many screen sizes as possible (i.e. as small as 320px)?
to support different screen sizes you should use percentage, not pixel. But in case you are more comfortable using fixed width (using pixel) you can use media queries to achieve that.
.container { //start with the smallest screen width
width: 300px;
margin: 0 auto;
}
#media screen and (min-width: 40em) { // 640px
.container {
width: 500px;
}
}
But I do recommend you to use percentage instead of pixel. Hope you find this useful.
I am trying to create a layout where each DIV has a max-width of 300px.
If the screen is 600px then two 100% divs should be placed next to each other.
If the screen is 700px then three 233px (each DIV 100%) should be placed next to each other.
This means that the DIVs should always take up 100% of the screen width.
I would also like to have a min-width (such as 150px) so that each DIV cannot be smaller than a certain amount.
This means that on a small screen I might get two columns with DIVs and on a large scren I might get four or more columns with DIVs.
In this example you would have 4 columns when screen is larger than 900px, and it would go down to 3 columns when screen hits 900px, then 2 columns when the screen hits 600px, and one columns when it hits 300px. This will keep divs taking up 100% of screen and maximum width will always be 300px (except for screens larger than 1200px wide, where you will still get 4 columns)
div {
width: 25%; /* anything above 900px and there will be 4 columns */
min-width: 150px;
float: left;
height: 200px;
}
#media screen and (max-width: 900px) {
div { width: 33%; }
}
#media screen and (max-width: 600px) {
div { width: 50%; }
}
#media screen and (max-width: 300px) {
div { width: 100%; }
}
This can be modified to have any number of columns and any number of different threshold screen sizes where number of columns will change.
If you have borders or margins you will also have to make the width %s slightly smaller.
div
{
width:33.3333%;
min-width:150px;
max-width:300px;
display:inline-block;
background:#EFEFEF;
border:1px solid #CCC;
height:100px;
}
I haven't tested it (today) but I think this will work until the minimum size is reached.