Grid Layout: create CSS so Elements keep position when adjacent element gets resized
Here is one solution that may work for you:
Demo Fiddle
It's just a matter of having a hover state where you can change the width+ height or you can use transform: scale();. I set the scaling elements to position: absolute just so you can make sure the z-index of the hovered element is always the highest.
HTML:
<div class="wrapper">
<ul>
// many <li> elements
</ul>
</div>
CSS:
.wrapper {width: 300px;}
li {
display: inline-block;
height: 40px;
width: 40px;
position: relative;
padding: 3px;
}
a {
display: block;
height: 40px;
width: 40px;
background: lightblue;
position: absolute;
-webkit-transition: .3s;
transition: .3s;
}
a:hover {
-webkit-transform: scale(2,2);
transform: scale(2,2);
z-index: 100;
background: lightgreen;
}
Resize property on grid items results in overlap of other grid items
You can use flex to achieve this:
.grid { display: flex; flex-wrap: wrap;}
.grid>div { border: 1px solid red; width: 150px;}
.grid>div { background-color: #eeeeff; margin: 1em; padding: 10px;}
.resize { resize: both; overflow: auto; border: 1px solid red;}<html>
<body> <div class="grid"> <div class="resize">Resize Me</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> </div></body>
</html>Change layout from row to grid on screen resize
You can try with grid and media query:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
margin: 1em;
}
a {
border-right: 1px solid grey;
}
a:last-child {
border-right: none;
}
@media screen and (max-width: 500px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
.container a:nth-child(1), a:nth-child(2) {
border-bottom: 1px solid grey;
}
a:nth-child(2) {
border-right: none;
}
a:nth-child(3):last-child {
grid-column: 1/3;
}
}<div class="container">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
<a>Link 4</a>
</div>
<div class="container">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>Dynamically resize columns in css grid layout with mouse
What you are looking to achieve is possible using only css. I've modified your example. The main takeaways are this:
- Most importantly, try not to insert raw content in your semantic layout tags. Use header, paragraph, and list tags rather than text and br tags. This makes your code both easier to read and easier to reason about. Many of your problems happened because of how reflow is handled in grid areas.
- Use grid-template to simplify your layout as it will make breakpoint reflow easier later on.
- Use overflow: auto; along with specifying resize: vertical/horizontal. Without setting overflow, resize will fail.
- Use min/max width/height values to create boundaries for resizing.
body { margin: 10px; height: 100%;}
main { display: grid; border: 3px dotted red; padding: 3px; grid-gap: 3px; grid-template: "nav head" min-content "nav main" 1fr / min-content 1fr;}
nav { grid-area: nav; border: 3px dotted blue; overflow: auto; resize: horizontal; min-width: 120px; max-width: 50vw;}
header { grid-area: head; border: 3px dotted orange; overflow: auto; resize: vertical; min-height: min-content; max-height: 200px;}
section { grid-area: main; border: 3px dotted gray;}<main> <nav> <ul> <li>Nav Item</li> <li>Nav Item</li> <li>Nav Item</li> <li>Nav Item</li> <li>Nav Item</li> <li>Nav Item</li> </ul> </nav>
<header> <h1>Header Title</h1> <small>Header Subtitle</small> </header>
<section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section></main>How do I keep two side-by-side div elements the same height?
Flexbox
With flexbox it's a single declaration:
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>How to keep css grid layout the same on resize
That's caused by using vw as a unit for sizing your grid. Which means when the device screen height changes, the grid changes.
To keep the h/w ratio of an HTML element you can use percentile bottom-padding, because it's designed specifically for this purpose and it's a percentage of the element's width, not of its height.
So you could give <main> a particular ratio using: padding-bottom: 45% (approx).
Now, in order to size your grid according to the size of <main> you'll need to position it absolute:
main {
position: relative;
padding-bottom: 45%;
}
.grid {
position: absolute;
top: 0;
bottom: 0;
/* also change the `vh` to `%` */
grid-auto-rows: 30%;
grid-column-gap: 3%;
grid-row-gap: 30%;
}
Working example:
figure { width: 100%; height: 100%; margin: 0;}img { width: 100%; height: 100%; object-fit: cover;}main { width: 90vw; margin: 0 auto; position: relative; padding-bottom: 42%;}.grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 30%; grid-column-gap: 3%; grid-row-gap: 30%; position: absolute; top: 0; bottom: 0;}.grid article:first-of-type { grid-column: 1/4; grid-row: 1 / 3;}.grid article:nth-child(2) { grid-column: 4/6; grid-row: 1 / 2;}.grid article:nth-child(3) { grid-column: 1/4;}.grid article:nth-child(4) { grid-column: 4/6;}.grid article:nth-child(5) { grid-column: 1/3;}.grid article:nth-child(6) { grid-column: 3/6; grid-row: 4/6;}.grid article:nth-child(7) { grid-column: 1/3; grid-row: 6/7;}.grid article:nth-child(8) { grid-column: 3/5; grid-row: 6/7;}.grid article:nth-child(9) { grid-column: 5/6; grid-row: 6/7;}.grid article:nth-child(10) { grid-column: 1/4; grid-row: 7/9;}.grid article:nth-child(11) { grid-column: 4/6; grid-row: 7/8;}.grid article a { text-decoration: none; color: #474747;}.grid article h1 { font-size: 3.2vw; letter-spacing: 0.3vw; font-weight: lighter;}.grid article p { font-size: 0.7rem; letter-spacing: 0.1rem;}.grid figcaption { padding: 0;}<main> <div class="grid"> <article> <a href=""> <figure> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="Sample Image"> <figcaption> <h1>Bori Bianka Jewelry</h1> <p>Art Direction, Illustration, Advertising</p> </figcaption> </figure> </a> </article> <!-- Project 1 ends --> <article> <a href=""> <figure> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="Sample Image"> <figcaption> <h1>Upton</h1> <p>Branding, Creative Direction, Packaging</p> </figcaption> </figure> </a> </article> <!-- Project 2 ends --> <article> <a href=""> <figure> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="Sample Image"> <figcaption> <h1>Nike / Ganar te la Pela</h1> <p>Art Direction, Illustration, Advertising</p> </figcaption> </figure> </a> </article> <!-- Project 3 ends --> <article> <a href=""> <figure> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="Sample Image"> <figcaption> <h1>Guajira</h1> <p>Art Direction, Branding, Graphic Design</p> </figcaption> </figure> </a> </article> <!-- Project 4 ends --> <article> <a href=""> <figure> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="Sample Image"> <figcaption> <h1>La Cocinería</h1> <p>Branding, Architecture</p> </figcaption> </figure> </a> </article> <!-- Project 5 ends --> <article> <a href=""> <figure> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="Sample Image"> <figcaption> <h1>NIKE 4D Executive Offices</h1> <p>Digital Art, Drawing, Illustration</p> </figcaption> </figure> </a> </article> <!-- Project 6 ends --> <article> <a href=""> <figure> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="Sample Image"> <figcaption> <h1>Cta18</h1> <p>Branding, Art Direction, Motion Graphics</p> </figcaption> </figure> </a> </article> <!-- Project 7 ends --> <article> <a href=""> <figure> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="Sample Image"> <figcaption> <h1>Foodiest</h1> <p>Branding</p> </figcaption> </figure> </a> </article> <!-- Project 8 ends --> <article> <a href=""> <figure> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="Sample Image"> <figcaption> <h1>Fabulous</h1> <p>Illustration</p> </figcaption> </figure> </a> </article> <!-- Project 9 ends --> <article> <a href=""> <figure> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="Sample Image"> <figcaption> <h1>Zertouche</h1> <p>Art Direction, Branding, Print design</p> </figcaption> </figure> </a> </article> <!-- Project 10 ends --> <article> <a href=""> <figure> <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="Sample Image"> <figcaption> <h1>Sweet Dough </h1> <p>Art Direction, Branding, Packaging</p> </figcaption> </figure> </a> </article> <!-- Project 11 ends --> </div></main>Controlling the size of an image within a CSS Grid layout
You have two different problems here.
I'll address the first one, which is to contain the image in its container. You almost had it.
Your code:
.photo > img {
object-fit: cover;
width: 100%;
}
You just needed to specify a maximum height on the image so it could not overflow the container:
.photo > img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
JSFiddle demo
The second problem, which is to scale the size of the image container, and drag up the grid items below when the image gets smaller, is significantly more complex.
This isn't an issue relating to the image. In fact, you can remove the image altogether when trying to solve this problem.
This is an issue of dynamically sizing a grid item (the image container). Why would this grid item change size in relation to the image size, when its size is being controlled by grid-template-columns and grid-template-rows?
In addition, why would the bottom row of grid items (tag, album, rotate) follow the image container either up or down? They would have to exit their row.
Scaling the entire grid container wouldn't be a problem. But it seems like you only want to scale one grid item (the image container). It's tricky. You're probably looking at additional containers, auto values for lengths, and possibly scripting.
Here's what happens if you give the image rows an auto value: JSFiddle demo
How do I stop a CSS layout from distorting when zooming in/out?
As this question still gets constant views, I'll post the solution I use currently.
CSS Media Queries:
@media screen and (max-width: 320px) {
/*Write your css here*/
}
@media screen and (max-width: 800px) {
}
Check out:
CSS-Tricks + device sizes and Media Queries
Related Topics
What Do Commas Mean in CSS Selectors
Styling an Input Button Using "Sliding Doors"
Using SASS Map Function Instead of Variable Interpolation
How to Map CSS and Js File from Jsp File in Spring Mvc
Highlight Div1 and Div2 on Div2 Mousover, Highlight Nothing on Div1 Mouseover
Scrolling Effect: Slow at First Than It Goes Fast
CSS: Position Loading Indicator in The Center of The Screen
Twitter Bootstrap Text Field's Height Too Small
CSS Not Loading in Firefox, Opera and Ie - Chrome and Safari Works Just Fine
CSS Element Back to Default Style
How to Animate Path Shape Without Using Smil
Tailwindcss Not Using My Custom Class Inside Breakpoints
Place View on Top of Other View in React Native