How should you put an image on the left of the heading name?
return (
<div className="header">
<img src={"/images/logo.png"} width="10" height="5" />
<p className="name">heading name</p>
<div className="header-right">
In your header class, which is basically a container for the img, p and div, add a grid.
.header {
display: grid;
grid-template-columns: 50px 1fr 50px; // This will create 2 columns of 50 pixels, and the middle column will fill the remaining space grid-template-rows: 1fr; // just one row
height: 100%;
width: 100%;
}
return (
<div className="header">
<img src={"/images/logo.png"} width="10" height="5" />
<p className="name">heading name</p>
<div className="header-right">
Related
I am not sure why my CSS image grid is not aligning with the length of the webpage, even though I have made the length and width the same as the 1200px.
Note: When I open the inspect tool in google. It states that the width is 1184, however, when I change it to 1200px it doesn't fix the problem
My goal is to have this CSS grid to be 1200px * 500px. I really appreciate any help you can provide.
img {
width: 400px;
height: 250px;
}
.container-2 {
margin-top: 2em;
background-color: rgb(50, 100, 0);
display: grid;
grid-template-rows: 250px 250px;
grid-template-columns: repeat(3, 400px);
}
.photo_caption {
position: absolute;
}
<div class="container-2">
<div class="pic-1">
<img src="images/sailboat.jpg" alt="sailing" />
</div>
<div class="pic-2">
<img src="images/water.jpg" alt="oceanside" />
</div>
<div class="pic-3">
<img src="images/pool.jpg" alt="swimming pool" />
</div>
<div class="pic-4">
<img src="images/tree.jpg" alt="oceanview" />
</div>
<div class="pic-5">
<img src="images/side-wall.jpg" alt="campground" />
</div>
<div class="pic-6">
<p class="photo_caption">
We're dog-friendly... If your dog is friendly, too!</p>
<img src="images/dog.jpg" alt="dog friendly" />
</div>
</div>
The photos should look like this:
This is a uni assignment and it’s like my first experience with coding so please try to understand. And I'm pretty sure there are a lot of mistakes so please help me out if you can.
This is my code so far:
.wrapper-home-photo {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
background-color: #1d1d1e;
padding: 100px;
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home1.jpg" width="540" height="330" />
</figure>
</div>
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home2.png" width="400" height="220" />
</figure>
</div>
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home3.jpg" width="540" height="330" />
</figure>
</div>
this may help you
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home1.jpg" width="540" height="330" />
</figure>
<figure>
<img src="./src/imgs/home-photos/strangerthings-home2.png" width="400" height="220" />
</figure>
<figure>
<img src="./src/imgs/home-photos/strangerthings-home3.jpg" width="540" height="330" />
</figure>
</div>
Put all the images into one centralized div with the class block. From here, you can use display: grid to align all the contents of the div into a grid. Then just do grid-template-columns: 1fr 1fr 1fr; to create 3 columns, each 1fr being 1 fraction of the div, and since you have three images you will need 3 columns. You can use grid-gap: 20px to add some margins and separation between each image.
.banner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
grid-column-gap: 20px;
}
.banner img {
width: 100%;
}
<div class="banner">
<img src="https://www.muralswallpaper.com/app/uploads/Green-Tropical-Plant-Wallpaper-Mural-Plain.jpg">
<img src="https://www.muralswallpaper.com/app/uploads/Green-Tropical-Plant-Wallpaper-Mural-Plain.jpg">
<img src="https://www.muralswallpaper.com/app/uploads/Green-Tropical-Plant-Wallpaper-Mural-Plain.jpg">
</div>
Greet1ngs, everyone. I'm trying to implement a header on grid which dynamically moves columns to the next row on smaller screens. I use the following string to build it:
grid-template-columns: repeat(auto-fit, minmax(max-content, 230px));
It kinda works but on some resolutions columns do not expand to the full width to the right and thus another background (from [body]) becomes visible from underneath. How can I make all columns even to the right end of the screen without mediaquery or calc (will try those if no other way)? Sorry for unprofessional explanation, I'm still new to coding. Screenshot
#charset "utf-8";
.headergrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(max-content, 230px));
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;}
.headergrid > div {
background-color: #191D1F;}
<body style="background-color:#1ba6fc;">
<div class="headergrid">
<div class="location">
<img src="clipart-map-location-11.png" alt="location" width="20" height="20" class="locicon"><span style="color:#E2E4C9">Москва, ул Хабаровская, 2. Cр-Вс с 12 до 18.</span>
</div>
<div class="element">
<img src="phngrn.png" width="25" height="25" alt="phone" class="phonicon">+7(977)8844-922
</div>
<div class="element">
<img src="hiclipart.com (11).png" width="30" height="20" alt="mail" class="mailicon"/>mail#zvteh.ru
</div>
<div class="element">
</div>
<div class="social">
<img src="hiclipart.com.png" width="40" height="30" alt="whatsapp" class="whappicon">
<img src="hiclipart.com (12).png" width="30" height="30" alt="VK.com" class="vkicon">
<img src="hiclipart.com (14).png" width="27" height="27" alt="Telegram" class="telecon"></div>
</div>
The solution is to put this grid into parent div box with header's background color. It will override main background there and all rows appear having 100% width at all resolutions.
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 3 years ago.
I've got a layout that I'm working on that uses a combination of CSS Grid and Flexbox. The grid is setting up the structure (left hero image and 4 rows of content on the right).
Within each content row, I've got a flexbox that handles placement of a thumbnail image on the right, and three lines of text on the left - date, title and author.
However, when any of the lines of text are too long, they start bumping up the thumbnail image, as in Row 2 here:
Obviously I want the thumbnail to stay fixed in place and the text to just wrap before they touch it. I've tried a whole bunch of potential strategies - use of overflows, floats instead of flexbox, but can't find the trick. Any ideas?
Here's the code, Row 3 and Row 4 omitted for brevity, and a Codepen link:
https://codepen.io/anon/pen/dBWyzb
.wrapper {
width: 1200px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, minmax(100px, auto));
grid-template-areas:
"hero row1"
"hero row2"
"hero row3"
"hero row4";
grid-gap: 10px;
}
.hero {grid-area: hero;}
.row1 {grid-area: row1;}
.row2 {grid-area: row2;}
.flex {
display: flex;
background-color: lightblue;
align-items: center;
}
.thumbnail {
width: 100px;
height: 100px;
margin-left: auto;
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
<div class="wrapper">
<div class="grid">
<div class="hero">
<img src="https://dummyimage.com/600x400/000/fff"/>
</div>
<!-- Row 1 -->
<div class="row1">
<div class="flex">
<div class="text">
<div class="date">12 JULY 2019</div>
<h3>Title</h3>
<div class="author">Author Name</div>
</div>
<div class="thumbnail">
<img src="https://dummyimage.com/600x400/000/fff"></img>
</div>
</div> <!-- end flex -->
</div> <!-- end row -->
<!-- Row 2 -->
<div class="row2">
<div class="flex">
<div class="text">
<div class="date">12 JULY 2019</div>
<h3>A really long title seems to be shifting the right-hand image up, which is not ideal! Any ideas, internet? ------> </h3>
<div class="author">Author Name</div>
</div>
<div class="thumbnail">
<img src="https://dummyimage.com/600x400/000/fff"></img>
</div>
</div> <!-- end flex -->
</div> <!-- end row -->
</div>
</div>
Add flex: 1; to the .text div, so the flexbox can manage how much space it can take:
.wrapper {
width: 1200px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, minmax(100px, auto));
grid-template-areas: "hero row1" "hero row2" "hero row3" "hero row4";
grid-gap: 10px;
}
.hero {
grid-area: hero;
}
.row1 {
grid-area: row1;
}
.row2 {
grid-area: row2;
}
.flex {
display: flex;
background-color: lightblue;
align-items: center;
}
.text {
flex: 1;
}
.thumbnail {
width: 100px;
height: 100px;
margin-left: auto;
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
<div class="wrapper">
<div class="grid">
<div class="hero">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<!-- Row 1 -->
<div class="row1">
<div class="flex">
<div class="text">
<div class="date">12 JULY 2019</div>
<h3>Title</h3>
<div class="author">Author Name</div>
</div>
<div class="thumbnail">
<img src="https://dummyimage.com/600x400/000/fff"></img>
</div>
</div>
<!-- end flex -->
</div>
<!-- end row -->
<!-- Row 2 -->
<div class="row2">
<div class="flex">
<div class="text">
<div class="date">12 JULY 2019</div>
<h3>A really long title seems to be shifting the right-hand image up, which is not ideal! Any ideas, internet? ------> </h3>
<div class="author">Author Name</div>
</div>
<div class="thumbnail">
<img src="https://dummyimage.com/600x400/000/fff"></img>
</div>
</div>
<!-- end flex -->
</div>
<!-- end row -->
</div>
</div>
The default setting on flex items is flex-shrink: 1. This means the flex items are allowed to shrink in order to remain inside the container.
In your case, just disable flex-shrink. Add this to your code:
.thumbnail { flex-shrink: 0 }
I'm trying to build an element for a magazine website, where the first element consists of post promotion boxes with different widths and heights like on the following pic:
I'm using ZURB Foundation
I need a gutter between the boxes like on the pic
Using collapse and appropriate image sizes, I can get the desired result, but without gutters between the pics.
When I define custom foundation gutters manually, the height of the left pic changes for some pixels
Here is my approach:
<div class="row collapse">
<div class="column medium-6"><!-- Left Pic 50% width --></div>
<div class="column medium-6">
<div class="row collapse">
<div class="column medium-12"><!-- Right Top Pic 50% width, 50% height --></div>
<div class="column medium-6"><!-- Right Bottom Left Pic 25% width, 50% height --></div>
<div class="column medium-6"><!-- Right Bottom Right Pic 25% width, 50% height --></div>
</div>
</div>
</div>
It seems a good scenario for Grid layout
The basic idea is to create a template of the desired grid using grid-template property on the parent container and later to assign each area to the children elements with grid-area property.
Codepen demo
Markup
<section class="grid">
<div class="item first">
<img src="https://placekitten.com/g/600/500" />
</div>
<div class="item second">
<img src="https://placekitten.com/g/300/150" />
</div>
<div class="item third">
<img src="https://placekitten.com/g/149/100" />
</div>
<div class="item fourth">
<img src="https://placekitten.com/g/149/100" />
</div>
</section>
CSS
.grid {
width: 600px;
height: 250px;
display: grid;
grid-column-gap: 3px;
grid-row-gap: 3px;
grid-template:
"first first second second" 1fr
"first first second second" 1fr
"first first second second" 1fr
"first first third fourth" 1fr
"first first third fourth" 1fr / 1fr 1fr 1fr 1fr;
}
.grid .first { grid-area: first; }
.grid .second { grid-area: second; }
.grid .third { grid-area: third; }
.grid .fourth { grid-area: fourth; }
Images can be added either as regular img elements or as backgrounds, as you prefer.
Result