I have so many divs in my website and I want to align them like this with CSS and HTML:
<div class="card" style="width: 18rem; margin: 16px;">
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">Music Name</p>
</div>
</div>
It looks like a Masonry Layout. Try the Below Code and make necessary modifications.
This snippet uses CSS-Grids. You will need to change basic styles on some grid-items to make it look exactly as yours :)
/* CSS reset */
*,
*::after,
*::before {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
position: relative;
}
html {
font-size: 62.5%;
}
/* Typography --------------------------------------------*/
body {
font-family: 'Helvetica Neue', sans-serif;
font-size: 2rem;
text-align: center;
}
.heading {
margin-bottom: 3rem;
}
.body-text {
font-size: 1.6rem;
line-height: 2.5rem;
margin: 0 auto;
width: 70%;
}
.footer-text {
color: #fff;
font-size: 1.5rem;
}
/* Grids --------------------------------------------*/
.container {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(12, 150px);
margin: 0 auto;
max-width: 90%;
padding: 3rem 0;
}
/* Grid images --------------------------------------------*/
.img {
border-radius: 1rem;
height: 100%;
width: 100%;
object-fit: cover;
}
/* Grid items --------------------------------------------*/
.item-4 {
grid-row: 2/5;
}
.item-5 {
grid-row: 2/6;
}
.item-6 {
grid-row: 2/4;
}
.item-7 {
grid-row: 5/6;
}
.item-8 {
grid-row: 4/6;
}
.item-9 {
grid-row: 6/11;
}
.item-10 {
grid-row: 6/7;
}
.item-11 {
grid-row: 6/9;
}
.item-12 {
grid-row: 7/12;
}
.item-13 {
grid-row: 9/13;
}
.item-14 {
grid-row: 11/13;
}
<body>
<main class="container">
<div class="item-1">
<img class="img" src="https://picsum.photos/500/300" alt="">
</div>
<div class="item-2">
<img class="img" src="https://picsum.photos/500/301" alt="">
</div>
<div class="item-3">
<img class="img" src="https://picsum.photos/500/302" alt="">
</div>
<div class="item-4">
<img class="img" src="https://picsum.photos/500/600" alt="">
</div>
<div class="item-5">
<img class="img" src="https://picsum.photos/500/800" alt="">
</div>
<div class="item-6">
<img class="img" src="https://picsum.photos/500/400" alt="">
</div>
<div class="item-7">
<img class="img" src="https://picsum.photos/500/304" alt="">
</div>
<div class="item-8">
<img class="img" src="https://picsum.photos/500/401" alt="">
</div>
<div class="item-9">
<img class="img" src="https://picsum.photos/500/900" alt="">
</div>
<div class="item-10">
<img class="img" src="https://picsum.photos/500/305" alt="">
</div>
<div class="item-11">
<img class="img" src="https://picsum.photos/500/500" alt="">
</div>
<div class="item-12">
<img class="img" src="https://picsum.photos/500/901" alt="">
</div>
<div class="item-13">
<img class="img" src="https://picsum.photos/500/700" alt="">
</div>
<div class="item-14">
<img class="img" src="https://picsum.photos/500/402" alt="">
</div>
<div class="item-15">
<img class="img" src="https://picsum.photos/500/306" alt="">
</div>
</main>
</body>
you can use grid layout
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
add this to a div and children of the div can be adjusted the way you want.
You can stack the card divs using display:flex property. Give display:flex property to your div container and flex-wrap:wrap so that the divs can wrap itself. Use any other flexbox properties you like on container after that. So your code might look like this.
<div class="card-container" style="display:flex;flex-wrap:wrap">
<div class="card" style="width: 18rem; margin: 16px;">
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
</div>
I tried I've fixed it, let me know if it is good for you:
This is also responsive..
<style>
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
.card {
margin: 5px;
font-size: 30px;
text-align: center;
flex: 1 1 150px; /* Stretching */
}
img{
width: 300px
}
</style>
<body>
<div class="grid-container">
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
</div>
</body>
Related
I have a splited container with CSS grid like under in code.I want to place them one under another only on mobile phones (max-width < 576px).
* {
box-sizing: border-box;
}
.col-1-3 img {
display: block;
width: 100%;
}
.help-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin: 0 auto;
width: 1700px;
}
<div class="help-container">
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
</div>
I tried to use a Bootstrap documentation and to devide a class into rows(.grid) but its placing them on all screens one under another.And tried to add every block col-1-3 into a independent row but still cannot.
<div class="help-container">
<div class="grid">
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
</div>
</div>
I want to acheive this design any next category will automatically adjust to the previous div. Every category have not specific product but need to just after the previous product like we use float left or display-flex But don't want to create multiple css for responsive. Because it has more than 25 categories. `
.offerpage .product-box {
margin: 0 5px;
}
.categoryProductsWrap{
width: 100%;
}
.product-img{
width: 100%;
}
.categoryProductsWrap .categoryProducts {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.categoryProductsWrap .categoryProducts .product-box {
margin-bottom: 10px;
float: left;
}
.offerpage .categoryName {
color: #161719;
font-size: 24px;
font-weight: bold;
margin-bottom: 0.5em;
border-bottom: solid 1px #dddddd;
padding-bottom: 0.125em;
}
.img-box{
position: relative;
padding-top: 124%;
display: inline-block;
width: 100%;
vertical-align: top;
}
.product-box .product-img{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.txt-content {
overflow: hidden;
position: relative;
}
.img-box{
position: relative;
padding-top: 124%;
display: inline-block;
width: 100%;
vertical-align: top;
}
.offerpage{
display: flex;
flex-wrap: wrap;
}
.categoryProductsWrap .categoryProducts .product-box{
width: 33.333%
}
#media (min-width: 1200px){
.categoryProductsWrap.cooling_fan {
width: 50%;
}
.categoryProductsWrap.accessories {
width: 50%;
}
}
#media (min-width: 1440px){
.categoryProductsWrap.accessories .categoryProducts .product-box,
.categoryProductsWrap.cooling_fan .categoryProducts .product-box {
width: calc(50% - 10px);
}
}
<div class="offerpage">
<div class="categoryProductsWrap accessories">
<div class="categoryName">Accessories</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categoryProductsWrap cooling_fan">
<div class="categoryName">Cooling Fan</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categoryProductsWrap asus">
<div class="categoryName">Asus</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categoryProductsWrap audio">
<div class="categoryName">Audio Device</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`
If you want to use CSS grid, there no big difficulties simply check the documentation to understand the main CSS properties you need to add.
Also check this guide on CSS grid to undertand more and see examples.
Quick help
If I understand correctly you want 3 items max per row, to do that you will need to set:
grid-template-columns: repeat(3, 1fr);
The equivalent to flex-direction: row; is grid-auto-flow: row;
You will I presume also need a gap (spacing between items), something like that:
gap: 10px;
So a good starting point will be:
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
gap: 10px;
I leave you do the rest according to your needs.
It's not my proudest moment to say that I am struggling with this since yesterday, I managed to make my gallery thumbnails look almost like the model in the picture that I uploaded, but I can't add the "image title" section. I managed at some point to put a title and the gray background, but when I hovered on it, only the image moved and not the title. Please help me so I can get rid of this problem once and forever (Thank you for your time):
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
background: rgb(255, 255, 255);
padding: 15px;
}
.box > img {
width: 80%;
display: block;
background-color: cornflowerblue;
border-radius: 12%;
}
.container img:hover {
transform: scale(1.04);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="placeholder-image.png">
<span>daa</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>Image</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>rrrr</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
</div>
</body>
If you want the hover styling to apply to the title text and the image, just use transform on the .box container hover state instead of only the image with .container img:hover. This way both the <img> and the <span> text will "move as one" since they are both children of the .box parent container. Try this out.
.box {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.box .title {
background: #ddd;
padding: .5rem 1rem;
text-align: center;
width: -webkit-fill-available;
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
}
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
background: rgb(255, 255, 255);
padding: 15px;
}
img {
max-width: 100%;
}
.box > img {
width: 100%;
display: block;
background-color: cornflowerblue;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
/* border-radius: 12%;*/
}
.box:hover {
transform: scale(1.04);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
</div>
</body>
How to remove space in div class title. I want no margin width div class price
Always have space in div class title.
I try align-content: flex-start or align-items: flex-start for main_product but don't work.
If I use align-items: center for item, then..
img {
max-width: 100%;
display: block;
}
.vnt-elm {
width: 100%;
float: left;
}
.main_product {
max-width: 500px;
display: grid;
grid-gap: 10px;
}
.main_product .item {
display: grid;
grid-template-columns: 80px auto;
grid-gap: 10px;
grid-row-gap: 0;
background: #F5F5F5;
}
.main_product .item .thumb {
grid-row: 1 / 3;
}
.main_product .item .title {
background: #BA95FF;
margin: 0;
padding: 0;
}
.main_product .item .price {
background: #9CD0D8;
}
<div class="vnt-elm main_product">
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product</h4>
<div class="vnt-elm price">
<del><span class="woocommerce-Price-amount amount"><bdi>500.000<span class="woocommerce-Price-currencySymbol">U</span></bdi></span></del>
<ins><span class="woocommerce-Price-amount amount"><bdi>380.000<span class="woocommerce-Price-currencySymbol">U</span></bdi></span></ins>
</div>
</div>
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product 01</h4>
<div class="vnt-elm price">
<span class="woocommerce-Price-amount amount"><bdi>650.000<span class="woocommerce-Price-currencySymbol">U</span></bdi>
</span>
</div>
</div>
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product product product 02</h4>
<div class="vnt-elm price">
Contact US
</div>
</div>
</div>
https://codepen.io/dinhcode/pen/yLOVoGV
Any idea for case. thanks!
You might need too to set your row template :
grid-template-rows:auto 1fr ;
img {
max-width: 100%;
display: block;
}
.vnt-elm {
width: 100%;
float: left;
}
.main_product {
max-width: 500px;
display: grid;
grid-gap: 10px;
}
.main_product .item {
display: grid;
grid-template-columns: 80px auto;
grid-template-rows:auto 1fr ;
grid-gap: 10px;
grid-row-gap: 0;
background: #F5F5F5;
}
.main_product .item .thumb {
grid-row: 1 / 3;
}
.main_product .item .title {
background: #BA95FF;
margin: 0;
padding: 0;
}
.main_product .item .price {
background: #9CD0D8;
}
<div class="vnt-elm main_product">
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product</h4>
<div class="vnt-elm price">
<del><span class="woocommerce-Price-amount amount"><bdi>500.000<span class="woocommerce-Price-currencySymbol">U</span></bdi></span></del>
<ins><span class="woocommerce-Price-amount amount"><bdi>380.000<span class="woocommerce-Price-currencySymbol">U</span></bdi></span></ins>
</div>
</div>
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product 01</h4>
<div class="vnt-elm price">
<span class="woocommerce-Price-amount amount"><bdi>650.000<span class="woocommerce-Price-currencySymbol">U</span></bdi></span>
</div>
</div>
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product product product 02</h4>
<div class="vnt-elm price">
Contact US
</div>
</div>
</div>
I have total 20 images of products. I want to show these images like 1st product should be on left side and related images of that product on right hand side. Remaining products should come under 1st product column wise on the left hand side.
Currently, I am trying to do so but it is now coming properly. I am not good with CSS though. Could someone tell me what I am doing wrong?
Below is my code.
HTML
for all products images
<mat-card class="example-card" fxFlex="60%;" fxFlex.xs="80%">
<div class="grid" *ngIf="resultData">
<div class="item photo" *ngIf="anums[0]">
<img class="photothumb" [src]="resultData[0]" (click)="openImageDialogbox(resultData[0])" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_01]">Zum Produkt {{ anums[0] }}</p>
</div>
</div>
<div class="item photo" *ngIf="anums[1]">
<img class="photothumb" [src]="resultData[1]" (click)="openImageDialogbox(resultData[1])" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_02]">Zum Produkt {{ anums[1] }}</p>
</div>
</div>
<div class="item photo" *ngIf="anums[2]">
<img class="photothumb" [src]="resultData[2]" (click)="openImageDialogbox(resultData[2])" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_03]">Zum Produkt {{ anums[2] }}</p>
</div>
</div>
</div>
</mat-card>
For image of first product (like logo, supporting images etc)
<div class="grid">
<div class="item photo" *ngIf="secondImage">
<img class="photothumb" [src]="secondImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Bild 2
</div>
<div class="item photo" *ngIf="thirdImage">
<img class="photothumb" [src]="thirdImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Bild 3</p>
</div>
</div>
<div class="item photo" *ngIf="fourthImage">
<img class="photothumb" [src]="fourthImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Bild 4</p>
</div>
</div>
<div class="item photo" *ngIf="logo">
<img class="photothumb" [src]="logo" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Logo</p>
</div>
</div>
<div class="item photo" *ngIf="brandImage">
<img class="photothumb" [src]="brandImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Siegel</p>
</div>
</div>
</div>
</div>
CSS
.grid {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 150px;
/* flex-direction: row wrap; */
}
.item {
background-color: #ffffff;
margin: 10px;
width: 300px;
}
.photothumb {
max-width: 200px;
max-height: 200px;
cursor: pointer;
}
.desc {
padding: 10px 10px 5px 10px;
cursor: pointer;
}
.desc img {
width: 50%;
margin: 0 10px 10px 0;
float: left;
}
.desc p {
margin-bottom: 10px;
font-family: 'Arial';
font-size: 15px;
}
.photo {
grid-row-end: span 2;
}
Solution which I did :
<mat-card class="example-card" fxFlex="60%;" fxFlex.xs="80%">
<div class='some-page-wrapper'>
<div class='row'>
<div class='column'>
<div class='blue-column' *ngIf="anums[0]">
<img [src]="resultData[0]" (click)="openImageDialogbox(resultData[0])" onError="this.src='/assets/noImage.png';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_01]">Zum Produkt {{ anums[0] }}</p>
</div>
</div>
</div>
<div class='green-column' *ngIf="secondImage">
<img [src]="secondImage" (click)="openImageDialogbox(secondImage)" onError="this.src='/assets/noImage.png';">
<div class="desc">
<p>Bild 2</p>
</div>
</div>
</div>
</div>
</mat-card>
CSS:
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}