This question already has answers here:
What is difference between justify-self, justify-items and justify-content in CSS grid?
(4 answers)
Closed 4 years ago.
I am new in CSS-Grid topic, I created a header for a website with the help of GRID, I created header with logo , navBar , searchbar , button with grid
.header {
height: 60px;
margin-bottom: 20px;
display: grid;
grid-template-columns: 1fr 3fr 0.1fr 0.5fr;
grid-auto-rows: 70px;
align-items:center;
justify-items: center;
}
Now these last two properties align-items and justify-items are apply for all ie, for logo , navbar , searchbar , button.
My problem is :I want to override this justify-items:center property
to justify-items:flex-start for navBar only. So who can I do this?
Here is screenshot of header:
If you're writing in pure CSS, you can add another line that is more specific, like this
.header .navBar {
justify-items:flex-start;
}
This will take priority over the previous css style you have. Generally speaking the more specific styles are applied first.
Related
This question already has an answer here:
Why is 'position: sticky' not working with Core UI's Bootstrap CSS
(1 answer)
Closed 5 months ago.
i have a weird situation that is happening only inside of a wordpress site installation. where i need to have a two columns grid and being the first one a sticky one on the top.
You can check the test page at: https://dev.mentepresente.pt/test/
the css is super simple and it works out of wordpress:
.wrapper {
display: grid;
grid-template-columns: 50px 200px;}
.item1 {
grid-column: 1;
align-self: start;
position: sticky;
top: 0;}
.item2 {
grid-column: 2;}
Does any one know the reason why this is happening?
The issue was because i had a parent element with overflow: hidden; that was messing up with with the sticky position
This question already has answers here:
How to set gaps (gutters) in a flex container?
(3 answers)
Closed 3 years ago.
Codesandbox example: https://codesandbox.io/embed/silly-firefly-87cov
We have random number of element inside parent. Elements position themselfs as it fit using flexbox.
Problem: how to do margins only between elements and not with parent?
I'd like to share a CSS Grid solution with you. We can use grid-gap to specify the spacing between the children themselves. This allows us to remove margin and focus on a more declarative layout from the parent element.
const Parent = styled.div`
display: grid;
grid-auto-rows: 300px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 5px;
`;
const Element = styled.div`
background-color: black;
border: 1px solid green;
color: white;
`;
CodeSandbox
This question already has answers here:
Text in a flex container doesn't wrap in IE11
(13 answers)
Closed 4 years ago.
I have a Flexbox container that's part of a two column container. This all looks good in Chrome, FF, etc except IE11. It has two children:
.container
h3 Title
p body
and my container:
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 45px 25px;
position: relative;
and it looks like this in IE11:
where it's cut off on both sides.
I've tried adding flex-basis, flex: 0 1 [...], max-width, overflow: hidden but to no avail. It still won't stop the cut offs. Is there anything i'm doing wrong?
I fixed it. Weirdly adding width: 100% to my p tag fixes it.
This question already has answers here:
CSS Grid Layout not working in IE11 even with prefixes
(4 answers)
Browser support for CSS Grid
(2 answers)
Closed 5 years ago.
I'm trying to use the CSS grid to make some columns on my page, but I cannot get it to work on IE.
Here is the CSS I have and it works fine on Chrome and Firefox.
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-column-gap: 15px;
grid-row-gap: 10px;
grid-auto-flow: dense;
margin: 1em auto;
padding-left: 10px;
padding-right: 15px;
font-size: 12px;
}
Is it possible to convert this CSS to work on IE?
You might be able to get partial support for CSS grid in IE >= 11 with the -ms- prefix. Reference.
IMO you can write fallback styles using flex to support older browsers and yet get the advantage of CSS grid on newer ones.
I have a section of my website that I am using the CSS below on 2 divs, and one a tag in order to have the content vertically aligned in the center.
The problem is that with the flex style properties, when the window is < 768px ideally the content would change layout and each col-md-4 would stack on top of one another.
This is not happening, instead the columns just become really skinny and are displayed still side by side. Is there any way to fix this? Preferably trying to stay away from table-cell formatting
.about-us-nav {
display: flex;
align-items: center;
justify-content: center;
}
.about-us-nav a {
font-size: 20px;
color: #52361D;
background-color: #885A31;
border-color: #52361D;
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.how-help-container {
margin-top: -25px;
display: flex;
align-items: center;
justify-content: center;
position:absolute;
z-index: 2;
}
There are two things you should consider:
When you apply display: flex to an element it becomes a flex container which comes with several default styles.
One of the defaults is flex-direction: row, which aligns flex items (child elements) along the horizontal axis. To switch to a vertical direction you need to specify flex-direction: column.
Another default is flex-wrap: nowrap, which forces flex items to remain on a single line (even if they overflow the container).
From your question:
The problem is that with the flex style properties, when the window
is <768px ideally the content would change layout and each col-md-4
would stack on top of one another. This is not happening, instead the
columns just become really skinny and are displayed still side by
side.
It sounds like the flex items are not wrapping. Try adding this to the flex container:
flex-wrap: wrap;
If you want the flex items to stack vertically when the window is < 768px, use a media query with the flex-direction property.
#media screen and (max-width: 768px) { .your-selector-here {flex-direction: column;} }
Note on browser support:
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.