I tried to rebuild this Square Grid: how-to-create-a-flexible-square-grid-with-css-grid-layout
It works until I put images into the grid elements: Photo wall
.square-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-auto-rows: 1fr;
grid-auto-flow: dense;
}
.square-container::before {
content: '';
width: 100%;
height: 0;
padding-bottom: 100%;
grid-row: 1 / 2;
grid-column: 1 / 1;
}
.square-container > *:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
/* Just to make the grid visible */
.square-container > * {
background: rgba(0,0,0,0.1);
border: 1px solid grey;
opacity: 0.75;
}
.square-container > *:focus,
.square-container > *:hover {
border: 1px solid blue;
opacity: 1;
}
.square-container img
{ object-fit: contain; width:100%; height:auto; padding:0; margin:0; }
How can I fit the img-elements into the whole size of the grid-element?
.square-container img {
object-fit: cover;
width:100%;
height:100%;
}
creates a rectangle. A fixed grid-auto-rows: 15rem creates a near-square but then I can abstain from the pseudo element.
Related
I have a 1x4 grid that looks like this.
The problem is that when the screen is widened, the buttons sometimes get cut off, and when they don't they're too horizontally stretched.
I would like to adjust the 1x4 grid to become a 2x2 when there's not enough vertical space.
I know this is possible with flex containers, but I'm failing in my attempts to figure out how.
This is my codepen:
https://codepen.io/TheNomadicAspie/pen/ZEKYwWJ
And this is the relevant code:
.multiple-choice {
}
.answer-1 {
grid-rows: 1/2;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-2 {
grid-rows: 2/3;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-3 {
grid-rows: 3/4;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.answer-4 {
grid-rows: 4/5;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.checkbox {
grid-columns: 1/2;
max-height: 90%;
background-image: url('checkbox_unchecked.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.button-container {
grid-columns: 2/3;
height: %;
padding-left: 5%;
}
.button-container button {
width: 100%;
}
.button {
display: inline-block;
height: 100%;
text-decoration: none;
background: black; /*Button Color*/
color: #f5f5f5;
border-bottom: solid 4px #f5f5f5;
border-radius: 3px;
font-family: hack;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.btn:active {
/*on Click*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px); /*Move down*/
border-color: black; /*disappears*/
}
I'm attempting to replace one image with another, and I know a common way is to shift one image and use a background-image. Unfortunately it's just showing completely blank for me when I do this.
Here's a code pen showing what I mean:
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
And here's the relevant CSS. Any ideas?
It's returning a 403 forbidden error when I check the console.
#main {
display: grid;
grid-template-areas:
'chat_bubble character_image'
'button_menu character_image';
grid-template-columns: 5fr 1fr;
place-items: center;
}
#chat_bubble {
grid-area: chat_bubble;
width: 70vw;
height: 70vh;
padding-left: 2vw;
padding-right: 2vw;
padding-top: 2vh;
padding-bottom: 2vh;
margin-bottom: 1vh;
}
#character_image {
grid-area: character_image;
margin-top: 2vh;
}
#character_image > img {
max-width: 100%;
}
#char_1 {
display: inline-block;
}
#button_menu {
grid-area: button_menu;
display: grid;
grid-template-columns: auto auto;
gap: 1em;
}
#media (max-width: 700px) {
#main {
grid-template-areas:
'chat_bubble chat_bubble'
'button_menu character_image';
grid-template-columns: 4fr 1fr;
}
#character_image > img {
height: 100px;
max-width: unset;
padding-top: 100px;
background-image: url('https://i.imgur.com/sRSVW2D.png') !important;
}
.container:after {
content: '';
position: absolute;
bottom: 0;
top: unset;
right: unset;
left: 75%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
border-right: 0;
margin-left: -0.406em;
margin-bottom: -0.812em;
}
}
Instead of using background-image in media queries, change src of the image on screen resize.
window.addEventListener('resize', ()=>{
if(window.innerWidth > 700) {
image.src = 'firstimage.jpg';
} else {
image.src = 'secondimage.jpg';
}
});
Use content: url() as
#character_image > img {
height: 100px;
max-width: unset;
/* padding-top: 100px; */
content: url("https://i.imgur.com/sRSVW2D.png");
}
Codepen
I've made a sort of diagram with temperature values and a schedule for it. Now I want to align the time-tags perfectly with the middle of my gaps between the "blocks". The first one works with position:absolute and left:(%-px/2), but the second and third example are off. How does one align these boxes?
The Fiddle is HERE.
body {
background-color: #DDD;
}
a {
cursor: pointer;
}
.block {
display: block;
height: 100%;
color: #FFF;
font-size: .75em;
float: left;
position: relative;
opacity: 1;
transition: opacity, 0.4s ease; /* hover effect transition */
border-radius: 5px;
}
.block:nth-child(n+2) {
margin-left: 0.5%;
}
.block:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.block.cool,
.legend li:nth-of-type(1):before {
background-color: #41A6F0;
}
.block.hot,
.legend li:nth-of-type(2):before {
background-color: #E27A3F;
}
.paused.cool {
background-color: #ccc;
}
.paused.hot {
background-color: #bbb;
}
.barchart {
display: grid;
margin: 0;
grid-template-columns:
[viewport-start] minmax(0.57em, 1fr) [container-start] minmax(20em, 35em) [container-end] minmax(0.75em, 1fr) [viewport-end];
grid-auto-rows: 30px;
}
row {
padding: 5px;
grid-column: container;
grid-row: span 4;
line-height: 120px;
text-align: center;
width: 0%;
animation: expand 1.2s ease forwards;
/* see animation "expand" below */
}
timerow {
grid-column: container;
grid-row: span 1;
line-height: 14px;
text-align: center;
visibility: hidden;
animation: 1.3s blendin; /* see animation "blendin" below */
animation-fill-mode: forwards;
margin-top: -15px;
position: relative;
}
timerow a {
position: absolute;
height: 25px;
width: 44px;
font-size: 0.8em;
color: #919191;
background: #fff;
}
/*
timerow a:last-child {
float: right;
margin-right: -12px;
}
timerow a:first-child {
margin-left: -17px;
}
*/
tag {
grid-column: container;
padding-top: 8px;
font-size: 0.8em;
color: #919191;
}
/* Big-Screen Design */
#media screen and (min-width: 768px) {
.barchart {
margin-left: -4.5em;
grid-template-columns:
[viewport-start] minmax(0.5em, 1fr) [axis-start] minmax(2em, 8em) [container-start] minmax(36em, 3fr) [container-end] minmax(0.5em, 1fr) [viewport-end];
}
tag {
grid-column: axis-start/container-start;
grid-row: span 4;
line-height: 120px;
padding: 0;
text-align: center;
}
}
/* intro animation */
#keyframes expand {
from {
width: 0%;
}
to {
width: calc(100% - 12px);
}
}
#keyframes blendin {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
#media screen and (min-width: 768px) {
#keyframes expand {
from {
width: 0%;
}
to {
width: calc(100% - 13px);
}
}
}
row:nth-child(4) {
animation-delay: .1s;
}
row:nth-child(6) {
animation-delay: .2s;
}
<div class="barchart">
<tag>Workday</tag>
<row>
<a style="width:28.9444444444%;" class="block cool">19deg</a>
<a style="width:63.805555555%;" class="block hot">21deg</a>
<a style="width:6.25%;" class="block hot">22deg</a>
</row>
<timerow>
<a style="left:calc(29.1944% - 22px);">07:30</a>
<a style="left:calc(93.5% - 22px);">22:30</a>
</timerow>
<tag>Weekend</tag>
<row>
<a style="width:44%;" class="block cool">16deg</a>
<a style="width:16%;" class="block paused hot">21deg</a>
<a style="width:38.5%;" class="block paused cool">18deg</a>
</row>
<timerow>
<a style="left:calc(44% - 22px);">00:00</a>
<a style="left:calc(60.75% - 22px);">00:00</a>
</timerow>
</div>
timerow a {
position: absolute;
height: 25px;
width: 44px;
font-size: 0.8em;
color: #919191;
background: #fff;
}
this one get's positioned too far right,
<a style="left:calc(93.5% - 22px);">22:30</a>
while this one works perfectly, where the ":" is centered in the gap:
<a style="left:calc(29.1944% - 22px);">07:30</a>
Even though I added the % numbers and factored in the 0.5% gap and subtracted the 22px for half the width of the box.
You also have the padding that you need to account for since position:absolute consider the padding-box to do the calculation. Add margin to timerow equal to the padding applied to row and you calculation will be correct.
You can also simplify the -22px with a translation. Also consider box-sizing:border-box; to your row element instead of decreasing the width in the animation.
body {
background-color: #DDD;
}
a {
cursor: pointer;
}
.block {
display: block;
height: 100%;
color: #FFF;
font-size: .75em;
float: left;
position: relative;
opacity: 1;
transition: opacity, 0.4s ease; /* hover effect transition */
border-radius: 5px;
}
.block:nth-child(n+2) {
margin-left: 0.5%;
}
.block:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.block.cool,
.legend li:nth-of-type(1):before {
background-color: #41A6F0;
}
.block.hot,
.legend li:nth-of-type(2):before {
background-color: #E27A3F;
}
.paused.cool {
background-color: #ccc;
}
.paused.hot {
background-color: #bbb;
}
.barchart {
display: grid;
margin: 0;
grid-template-columns:
[viewport-start] minmax(0.57em, 1fr) [container-start] minmax(20em, 35em) [container-end] minmax(0.75em, 1fr) [viewport-end];
grid-auto-rows: 30px;
}
row {
padding: 5px;
box-sizing:border-box;
grid-column: container;
grid-row: span 4;
line-height: 120px;
text-align: center;
width: 0%;
animation: expand 1.2s ease forwards;
/* see animation "expand" below */
}
timerow {
grid-column: container;
grid-row: span 1;
line-height: 14px;
margin:0 5px;
text-align: center;
visibility: hidden;
animation: 1.3s blendin; /* see animation "blendin" below */
animation-fill-mode: forwards;
margin-top: -15px;
position: relative;
}
timerow a {
position: absolute;
height: 25px;
width: 44px;
font-size: 0.8em;
color: #919191;
background: #fff;
transform:translateX(-50%);
}
tag {
grid-column: container;
padding-top: 8px;
font-size: 0.8em;
color: #919191;
}
/* Big-Screen Design */
#media screen and (min-width: 768px) {
.barchart {
margin-left: -4.5em;
grid-template-columns:
[viewport-start] minmax(0.5em, 1fr) [axis-start] minmax(2em, 8em) [container-start] minmax(36em, 3fr) [container-end] minmax(0.5em, 1fr) [viewport-end];
}
tag {
grid-column: axis-start/container-start;
grid-row: span 4;
line-height: 120px;
padding: 0;
text-align: center;
}
}
/* intro animation */
#keyframes expand {
from {
width: 0%;
}
to {
width: 100%;
}
}
#keyframes blendin {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
row:nth-child(4) {
animation-delay: .1s;
}
row:nth-child(6) {
animation-delay: .2s;
}
<div class="barchart">
<tag>Workday</tag>
<row>
<a style="width:28.9444444444%;" class="block cool">19deg</a>
<a style="width:63.805555555%;" class="block hot">21deg</a>
<a style="width:6.25%;" class="block hot">22deg</a>
</row>
<timerow>
<a style="left:calc((28.9444444444 + 0.5/2)*1%);">07:30</a>
<a style="left:calc((28.9444444444 + 63.805555555 + 0.5 + 0.5/2)*1%);">22:30</a>
</timerow>
<tag>Weekend</tag>
<row>
<a style="width:44%;" class="block cool">16deg</a>
<a style="width:16%;" class="block paused hot">21deg</a>
<a style="width:38.5%;" class="block paused cool">18deg</a>
</row>
<timerow>
<a style="left:calc(44% + 0.5%/2);">00:00</a>
<a style="left:calc(44% + 16% + 0.5% + 0.5%/2);">00:00</a>
</timerow>
</div>
I can make this layout using float easily. but having hard time to do with flex box.
css :
.a {
background: red;
float: left;
width: 30%;
height: 100px;
}
.b,
.c {
background: green;
overflow: hidden;
height: 45px;
}
.b {
margin-bottom: 10px;
}
.c {
background: lightblue
}
html:
<div class="a">column</div>
<div class="b">row1</div>
<div class="c">row2</div>
many thanks in advance.
Flexbox codepen demo
How does it work?
Wrap your columns in a common parent (e.g. a main element) with an height set. Then place your elements with flex-direction: column and create a space between b and c with justify-content: space-between.
The height of the column a is 100% of the container so b and c can shift into a new column thanks to flex-wrap: wrap.
CSS
main {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
height: 100px;
}
.a {
background: red;
height: 100%;
width: 30%;
}
.b, .c {
background: green;
height: 45px;
width: 70%;
}
.c {
background: lightblue
}
Grid Layout demo
How does it work?
With Grid Layout you could achieve the same thing by creating a layout with 10 columns and 2 rows and a gap between b and c with row-gap: 10px. Then adjust all the various (column|row)-(start|end)
CSS
main {
display: grid;
grid-template-columns: repeat(10, 1fr);
row-gap: 10px;
width: 100%;
}
.a {
background: red;
grid-area: 1 / 1 / 3 / 3;
}
.b,
.c {
grid-column: 3 / 11;
background: green;
overflow: hidden;
height: 45px;
}
.b {
grid-row-start: 1;
}
.c {
grid-row-start: 2;
background: lightblue;
}
You can achieve this by using grid by wrapping a,b,c in a grid-container
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.a {
background: red;
/* width: 30%; */
height: 100px;
grid-row-start: 1;
grid-row-end: 3;
}
.b,
.c {
background: green;
overflow: hidden;
height: 45px;
}
.b {
margin-bottom: 10px;
}
.c {
background: lightblue;
}
<div class="grid-container">
<div class="a">column</div>
<div class="b">row1</div>
<div class="c">row2</div>
</div>
It works when I do a URL from the internet, but not from a local file path. My directory of folders go
Website (folder with everything) --> images --> album --> tyler.jpg
so something with my link is messed up but I have tried everything I can think of.
.nav {
background: #ddd;
padding: 20px;
margin: 0;
}
.nav a {
padding: 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 350px;
grid-gap: 1em;
margin: 30px 100px 30px 100px;
overflow: hidden;
}
.grid > * {
background-repeat: no-repeat;
background-size: cover;
background-color: grey;
}
.f1 {
grid-column: 1/3;
grid-row: 1/3;
background-image: url('Images/album/tyler.jpg');
color: #fff;
}
you should use a relative path starting with "/"
background-image: url('/images/album/tyler.jpg');
otherwise it will just append the path to the current url