I'm new here. Maybe someone can help me out here. I have mostly setup my idea for a bootstrap layout with a nested grid too. Unfortunately I can't adjust the gutter space between the columns as I need it for the rest of my layout.
What I have now:
/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right: 7.5px;
padding-left: 7.5px;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
padding-right: 7.5px;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
padding-left: 7.5px;
}
.start-cat-grid {
display: block;
position: relative;
margin-bottom: 15px;
}
.start-cat-grid:hover:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 10, 10, .5);
z-index: 1;
}
.start-cat-grid:hover:before,
.start-cat-grid .mono,
.start-cat-grid img {
border-radius: 3px;
}
.start-cat-grid .text-wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 2;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.start-cat-grid h2 {
color: #fefefe;
text-transform: uppercase;
text-shadow: 0 0 0.825rem rgba(10, 10, 10, .8);
font-size: 4.0rem;
line-height: 1.4;
}
.start-cat-grid p {
color: #fefefe;
text-shadow: 0 0 0.3125rem rgba(10, 10, 10, .8);
max-width: 80%;
margin: 0 auto;
font-size: 2rem;
line-height: 130%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="test">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="row no-gutter">
<div class="col-sm-5 ">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#F8B636; height: 220px" alt="1"></div>
<div class="align-center text-wrapper">
<h2>1</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-7">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#F8B636; height: 220px" alt="1"></div>
<div class="align-center text-wrapper">
<h2>2</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
<div class="row no-gutter">
<div class="col-sm-3">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#E12882;height: 220px" alt="#"></div>
<div class="align-center text-wrapper">
<h2>3</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-3">
<div class="row no-gutter">
<div class="col">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#084F8B;height: 102.5px" alt="#"></div>
<div class="align-center text-wrapper">
<h2>4</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#127836;height: 102.5px" alt="#"></div>
<div class="align-center text-wrapper">
<h2>5</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
</div>
<div class="col-sm-6">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#8DBB2E; height: 220px" alt="6"></div>
<div class="align-center text-wrapper">
<h2>6</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
<div class="row no-gutter">
<div class="col-sm-4">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#AE1713; height: 220px" alt="7"></div>
<div class="align-center text-wrapper">
<h2>7</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-5">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#AE1713; height: 220px" alt="7"></div>
<div class="align-center text-wrapper">
<h2>8</h2>
<p>sample text</p>
</div>
</a>
</div>
<div class="col-sm-3">
<a class="start-cat-grid" href="#">
<div class="mono" style="background:#55ddff;height: 220px" alt="8"></div>
<div class="align-center text-wrapper">
<h2>9</h2>
<p>sample text</p>
</div>
</a>
</div>
</div>
</body>
</html>
You will see that I struggle with the number 4 and 5 in the layout.
because the gutter does not work around the this two rows.
Could any one have a look please and give a hint what I can do to get the same space from 15px between column 3 to (4,5) and (4,5) to 6?
i was able to solve my problem by implementing the layout with "css grid".
with css grid it is much easier to convert equal gaps, vertical and horizontal.
.startpage-css-grid {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(12, [col] 1fr);
grid-template-rows: [row] 220px [row] 102.5px [row] 102.5px [row] 220px;
}
.box {
display: block;
position: relative;
}
.box a,
.box img {
width: 100%;
height: 100%;
}
.box a {
display: inline-block;
}
.box img {
object-fit: cover;
}
.start-cat-grid:hover:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 10, 10, .5);
z-index: 1;
}
.start-cat-grid .text-wrapper {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 2;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.start-cat-grid h2 {
color: #fefefe;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 0 0.825rem rgba(10, 10, 10, .8);
font-size: 36px;
line-height: 42px;
}
.start-cat-grid p {
color: #fefefe;
text-shadow: 0 0 0.3125rem rgba(10, 10, 10, .8);
max-width: 80%;
margin: 0 auto;
font-size: 18px;
line-height: 22px;
}
.b1 h2,
.c1 h2,
.c3 h2 {
font-size: 24px;
line-height: 30px;
}
.b1 p,
.c1 p,
.c3 p {
font-size: 16px;
line-height: 22px;
}
.b2 h2,
.b3 h2 {
font-size: 20px;
line-height: 24px;
margin-bottom: 6px;
}
.b2 p,
.b3 p {
font-size: 14px;
line-height: 18px;
}
/* first row ---------------- */
.a1 {
grid-area: a1;
grid-column: col / span 5;
grid-row: row;
background: #F8B636;
}
.a2 {
grid-area: a2;
grid-column: col 6 / span 7;
grid-row: row;
background: #754494;
}
/* second row ---------------- */
.b1 {
grid-column: col 4 / span 3;
grid-row: row 2 / span 2;
background: #127836;
}
.b2 {
grid-column: col / span 3;
grid-row: row 2;
background: #084F8B;
}
.b3 {
grid-column: col / span 3;
grid-row: row 3;
background: #E12882;
}
.b4 {
grid-column: col 7 / span 6;
grid-row: row 2 / span 2;
background: #8DBB2E;
}
/* third row ---------------- */
.c1 {
grid-column: col / span 4;
grid-row: row 4;
background: #AE1713;
}
.c2 {
grid-column: col 5 / span 5;
grid-row: row 4;
background: #ed7800;
}
.c3 {
grid-column: col 10 / span 3;
grid-row: row 4;
background: #2a6496;
}
<div class="startpage-css-grid">
<div class="box a1">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box a2">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b1">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b2">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b3">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box b4">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box c1">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box c2">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
<div class="box c3">
<a class="start-cat-grid" href="#" title="#">
<div class="text-wrapper">
<h2>sample title</h2>
<p>sample slogan</p>
</div>
</a>
</div>
</div>
Related
I have a Html page in which Navigation bar and footer adjust itself according to the screen width but my main content isn't adjusting itself.
I have apllied media query but it's for resolution of mobile(517 px) but when I tested it on a pc in another with less screen width it was overflowing
All the area within class"bhavya" is overflowing out of screen.
/* Making of Box 1 on Left for posts */
.box1 {
background-color: white;
width: 746px;
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show {
display: none;
}
/* Styling Box For Search Box */
.search {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 130px;
float: right;
margin-top: 50px;
margin-left: 828px;
display: block;
position: absolute;
}
/* Search Written*/
.search h3 {
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 850px;
float: right;
margin-top: 220px;
margin-left: 828px;
display: block;
text-align: center;
position: absolute;
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
width: 746px;
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
#media screen and (max-width: 600px) {
.search {
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1 {
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent {
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<h1 class="heading"><b><i>GameMovieMania</i></b></h1> <br>
<div class="topnav" id="myTopnav">
Home
Games
Movies
Contact
About
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="bhavya">
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<span class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function(){
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input=input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
</script>
</span>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</a>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">About</li>
<li class="list-inline-item">Contact</li>
<li class="list-inline-item">Privacy Policies</li>
<li class="list-inline-item">Terms And Conditions</li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>
i hope this can some help
i added display:grid to your code and modified some of them
body{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 20vh 20vh auto 20vh;
grid-template-areas:
"h h h"
"b b s"
"b b r"
"f f f";
}
.header{
grid-area: h;
}
.box1{
grid-area: b;
background-color: white;
/* width: 746px; */
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn{
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show{
display: none;
}
/* Styling Box For Search Box */
.search{
grid-area: s;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 170px;
/* float: right; */
margin-top: 50px;
/* margin-left: 828px; */
display: block;
/* position: absolute; */
}
/* Search Written*/
.search h3{
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent{
grid-area: r;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 100%;
/* float: right; */
margin-top: 220px;
/* margin-left: 828px; */
display: block;
text-align: center;
/* position: absolute; */
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
/* width: 746px; */
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
.footer-basic{
grid-area: f;
}
#media screen and (max-width: 600px) {
.search{
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1{
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent{
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<header class="header">
<h1 class="heading"><b><i>GameMovieMania</i></b>
</h1> <br>
<div class="topnav" id="myTopnav">
Home
Games
Movies
Contact
About
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<div class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function() {
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input = input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
} else {
x[i].style.display = "list-item";
}
}
}
</script>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</p>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">About</li>
<li class="list-inline-item">Contact</li>
<li class="list-inline-item">Privacy Policies</li>
<li class="list-inline-item">Terms And Conditions</li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>
You can use the CSS overflow property.
.bhavya {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
I am making a grid with cards:
/* #84a5a9 */
body {
font-family: 'Roboto' !important;
}
.navbar-brand,
.footer-text,
.page-link,
.form-input>label,
.checkbox {
color: #84a5a9 !important;
}
.wishes {
padding: 5px;
background: rgba(229, 229, 229, 0.4);
}
.wishes>span {
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21px !important;
/* identical to box height */
color: #84A5A9;
}
.container {
color: #84A5A9 !important;
}
.front-text {
font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 32px;
line-height: 37px;
display: flex;
align-items: center;
text-align: center;
color: #84A5A9;
}
#media only screen and (max-width: 760px) {
.img {
height: 100px !important;
width: 100px !important;
}
.caption {
top: 30% !important;
}
.front-text {
font-size: 15px !important;
color: #84A5A9;
}
.bgimg-1 {
height: 700px !important;
}
.nav-title,
.wishes>span {
font-size: 14px !important;
}
.nav-logo {
height: 50px !important;
width: 50px !important;
}
.mobile {
padding: 0px 0px 0px 1px !important;
}
.form-input {
display: inline-grid !important;
}
.form-input>label,
input {
width: 100% !important;
}
.navbar-brand,
.footer-text {
font-size: 14px !important;
}
.footer-text {
width: 26% !important;
}
.footer-nav {
width: 40% !important;
}
}
.nav-logo {
height: 60px;
width: 60px;
}
.img {
height: 220px;
width: 220px;
}
.grid {
margin: 10px 20px 85px 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid-item:last-child {
grid-column: 1 / -1;
}
li:focus,
input:focus {
outline: none;
}
.grid img {
border: 1px solid #ccc;
max-width: 100%;
max-height: 162px;
}
.card {
max-height: 334px;
}
.card:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-inactive:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-inactive {
max-height: 334px;
filter: grayscale(90%);
border: 1px solid #ccc;
}
/*konteineriu issidestymas ekrane*/
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding-left: 50px;
padding-top: 50px;
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/*Naudojama submmito formos stulpeliams*/
label {
width: 150px;
padding-right: 20px;
display: inline-block;
}
.modal {
height: auto !important;
padding: 0 !important;
max-width: 800px!important;
max-height: 700px!important;
overflow-y: auto!important;
}
.container {
padding: 2px 16px;
}
.page-item.active .page-link {
z-index: 0 !important;
}
/* ----- NAVBAR ----- */
nav {
padding: 0px 5px 0px 20px !important;
position: fixed !important;
top: 0 !important;
width: 100% !important;
z-index: 1 !important;
}
nav .submit-button {
padding: 5px 10px;
margin: 5px;
}
/* ------- FOOTER ----- */
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
.navbar {
padding-top: 0;
padding-bottom: 0;
}
/* -------- ICONS ------ */
.fa-instagram {
background: #125688;
color: white;
}
.fa {
padding: 10px;
font-size: 15px !important;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
width: 35px;
height: 35px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
/* PARALLAX */
.front-sd {
position: fixed;
left: 24.65%;
right: 50%;
top: 15.82%;
bottom: 43.75%;
}
.front-logo {
position: fixed;
left: 50%;
right: 19.1%;
top: 15.82%;
bottom: 43.75%;
background: url('../images/logo.png');
}
.bgimg-1 {
background: url('../images/clouds.png');
min-height: 100%;
height: 1024px;
}
.front-text {
font-size: 20px;
width: 50%;
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
/* opacity: 0.65; */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.caption {
position: absolute;
left: 0;
top: 18%;
width: 100%;
text-align: center;
color: #000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel=icon href=images/100sd.png type="image/png">
<link rel="stylesheet" href="css/style.css?v=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<nav class="mobile navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/100sd.png" class="nav-logo d-inline-block align-middle" alt="">
<span class="nav-title">title</span>
</a>
<div class="wishes"><span>Done: 7</span></div>
<ul class="menu">
</ul>
</nav>
<script>
</script>
<div class="bgimg-1">
<div class="caption">
<div>
<img src="images/100sd.png" class="img d-inline-block align-middle" alt="">
<img src="images/logo.png" class="img d-inline-block align-middle" alt="">
</div>
<div class="front-text">
<span>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</span>
</div>
</div>
</div>
<div class="grid">
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<ul class="pagination" id="pagination">
<li class="page-item active"><a class="page-link" href=" ?pageNr=1">1</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=2">2</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=3">3</a></li>
</ul>
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
since I have paging I want my elements take the whole grid so it wouldn't look like it's the end of data though there are next page. However on certain sizes it doesn't take the whole grid and looks like:
I tried using auto-fill and auto-fit but I am clearly doing something wrong here. Coul anyone help?
Set the min value of your minmax to 400px:
/* #84a5a9 */
body {
font-family: 'Roboto' !important;
}
.container {
color: #84A5A9 !important;
}
.img {
height: 220px;
width: 220px;
}
.grid {
margin: 10px 20px 85px 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid img {
border: 1px solid #ccc;
max-width: 100%;
max-height: 162px;
}
.grid-item:last-child {
grid-column: 1 / -1;
}
.card {
max-height: 334px;
}
.card:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
/*konteineriu issidestymas ekrane*/
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding-left: 50px;
padding-top: 50px;
}
/*Naudojama submmito formos stulpeliams*/
.container {
padding: 2px 16px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="grid">
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<ul class="pagination" id="pagination">
<li class="page-item active"><a class="page-link" href=" ?pageNr=1">1</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=2">2</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=3">3</a></li>
</ul>
</div>
</div>
It still breaks at about 2200px but it depends on your use case as to whether that's an issue.
You can always set a max-width to prevent this:
.grid {
max-width: 1900px // Or whatever
}
I've made a responsive photo grid where each grid item serves as a container for an image with a text overlay. A link then spans over the grid item for navigation purposes. The grid item takes images with different aspect ratios, preserves the aspect ratio and clips off excess to fill the grid box.
What is the best way to do this using just CSS grid or flexbox?
I have posted two different methods below and both work, but which is most correct? Is it ok to just insert an image inside an <a> tag? Is using absolute positioning a bad thing in 2019? Should I use ul instead of divs?
Absolute positioning:
html {
font-family:arial;
font-size: 100%;
color: #CCC;
}
*{box-sizing: border-box;}
.fotogrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-gap: 1em;
}
.tile {
position: relative;
width: 100%;
border: 1px solid black;
}
.tile img {
object-fit: cover;
display: block;
height: 100%;
width: 100%;
}
.tile h4 {
position: absolute;
left: 0;
top: 0;
margin: 0;
background-color:#000;
padding:10px 14px;
opacity: .8;
}
.tile a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
text-decoration: none;
width: 100%;
height: 100%;
z-index: 1;
}
.tile:hover {
border: 1px solid #0066FF;
opacity: .55;
}
<section class="fotogrid">
<div class="tile">
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
<div class="tile">
<img src="https://www.placebear.com/300/200"/>
<h4>project title</h4>
</div>
</section>
Image wrapped in link:
html {
font-family:arial;
font-size: 100%;
color: #CCC;
}
*{box-sizing: border-box;}
.fotogrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-gap: 1em;
}
.tile {
position: relative;
width: 100%;
border: 1px solid black;
}
.tile img {
object-fit: cover;
display: block;
height: 100%;
width: 100%;
}
.tile h4 {
position: absolute;
left: 0;
top: 0;
margin: 0;
background-color:#000;
padding:10px 14px;
opacity: .8;
}
.tile:hover {
border: 1px solid #0066FF;
opacity: .55;
}
<section class="fotogrid">
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200"/>
</a>
<h4>project title</h4>
</div>
</section>
P.S. Is there anyway to center the text overlay and make it expand horizontally to the grid item box?
Using positioning is very much fine and I like wrapping img inside the a element. Anyway here is an approach that do not use positioning but uses an inner grid on the tile:
make each tile a grid container
place both h4 and a into the first row and first column explicitly by using grid-row: 1 and grid-column: 1.
now you can add align-self: flex-start to the h4 to position it to the top (you can adjust align-self for vertical positioning)
See demo below:
html {
font-family: arial;
font-size: 100%;
color: #CCC;
}
* {
box-sizing: border-box;
}
.fotogrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-gap: 1em;
}
.tile {
position: relative;
width: 100%;
border: 1px solid black;
display: grid; /* an inner grid */
}
.tile a {
grid-row: 1; /* place in first row */
grid-column: 1; /* place in first column */
}
.tile img {
object-fit: cover;
display: block;
height: 100%;
width: 100%;
}
.tile h4 {
margin: 0;
background-color: #000;
padding: 10px 14px;
opacity: .8;
grid-row: 1; /* place in first row */
grid-column: 1; /* place in first column */
align-self: flex-start; /* take auto-width */
}
.tile:hover {
border: 1px solid #0066FF;
opacity: .55;
}
<section class="fotogrid">
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
<div class="tile">
<a href="#">
<img src="https://www.placebear.com/300/200" />
</a>
<h4>project title</h4>
</div>
</section>
I am trying to create a photo gallery app. Currently, I have it so that up until four images, each image takes up 100 / n % of the div. When the number of images is more than 5, I want to make a grid appear as:
How could I achieve this? I have been reading on CSS-grid but they only seem to show examples of aligning images in one line.
Here is my code:
#photos {
width: 634px;
height: 339px;
}
.photos-gallery {
width: 634px;
height: 275.03px;
}
.photos-gallery-header {
font-size: 24px;
font-weight: bold;
line-height: 32px;
color: #333333;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 16px;
margin: 0 0 16px 0;
display: flex;
justify-content: space-between;
}
.photos-gallery-content {
height: 200px;
}
.photos-gallery-layout {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.photos-gallery-li {
flex: 1;
}
.photo,
.photo img {
height: 100%;
}
.photo img {
width: 100%;
object-fit: cover;
}
<body>
<div id= "photos-gallery" class="photos content-block">
<h2 class="photos-gallery-header"> 2 Photos </h2>
<div class="photos-gallery-content">
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg"/>
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</li>
</ul>
</div>
<div>
</body>
Use display: grid to achieve this. Using grid allows you to control column and row placement. Use this as a reference https://css-tricks.com/snippets/css/complete-guide-grid/
CSS
#photos-gallery {
height: 275px;
width: 634px;
}
.photos-gallery-header {
border-bottom: 1px solid #e1e1e1;
color: #333;
display: flex;
font-size: 24px;
font-weight: bold;
justify-content: space-between;
line-height: 32px;
margin: 0 0 16px;
padding-bottom: 16px;
}
.photos-gallery-content {
display: grid;
grid-template-columns: 20% 40% 20% 20%;
grid-column-gap: 0;
grid-row-gap: 0;
height: 200px;
}
.photos-gallery-content .item {
box-shadow: inset 0 0 0 1px #000;
overflow: hidden;
}
.photos-gallery-content .item-1 {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 1
}
.photos-gallery-content .item-2 {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 2;
}
.photos-gallery-content .item-3 {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
}
HTML
<div id="photos-gallery" class="photos content-block">
<h2 class="photos-gallery-header">2 Photos</h2>
<div class="photos-gallery-content">
<div class="item item-1">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</div>
<div class="item item-2">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg"/>
</div>
</div>
<div class="item item-3">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg"/>
</div>
</div>
<div class="item item-4">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</div>
<div class="item item-5">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg"/>
</div>
</div>
<div class="item item-6">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg"/>
</div>
</div>
<div class="item item-7">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg"/>
</div>
</div>
</div>
<div>
DEMO
While I hover Div tag, Another Div tag will appear in front of the prev Div. When i didn't put any words, it works. but when i put h3 tag, the div goes down.
here is the HTML
<div id="content">
<h1 class="head-content">Biscuits</h1>
<div class="line"></div>
<a href="#">
<div class="list-content">
<div class="detail-content">
<h3>Biscuits 1</h3>
<p>Price: IDR 12000</p>
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
</div>
here is CSS
#content{
width:50%;
}
.line{
border-top: 5px solid black;
}
.list-content{
display:inline-block;
width:25%;
height:200px;
background-color: black;
margin-top: 10px;
}
.detail-content{
display: none;
}
.list-content:hover .detail-content{
display: block;
width:100%;
height:75%;
background-color: rgba(255,255,255,0.6);
}
thank you before
Update below css part
.list-content:hover .detail-content {
display: table;
width: 100%;
height: 75%;
background-color: rgba(255, 255, 255, 0.6);
}
#content {
width: 50%;
}
.line {
border-top: 5px solid black;
}
.list-content {
display: inline-block;
width: 25%;
height: 200px;
background-color: black;
margin-top: 10px;
}
.detail-content {
display: none;
}
.list-content:hover .detail-content {
display: table;
width: 100%;
height: 75%;
background-color: rgba(255, 255, 255, 0.6);
}
<div id="content">
<h1 class="head-content">Biscuits</h1>
<div class="line"></div>
<a href="#">
<div class="list-content">
<div class="detail-content">
<h3>Biscuits 1</h3>
<p>Price: IDR 12000</p>
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
</div>
#James Please find following code. I hope you are expecting the same. Just replaced "display:inline-block;" with "float:left;" and took class "list-content" in anchor tag itself.
#content{
width:50%;
}
.line{
border-top: 5px solid black;
}
.list-content{
float:left;
width:25%;
height:200px;
background-color: black;
margin-top: 10px;
margin-right:10px;
}
.detail-content{
display: none;
}
.list-content:hover .detail-content{
display: block;
width:100%;
height:75%;
background-color: rgba(255,255,255,0.6);
}
.clearfix{
clear:both;
}
<div id="content">
<h1 class="head-content">Biscuits</h1>
<div class="line"></div>
<div class="clearfix">
<a href="#" class="list-content">
<div class="detail-content">
<h3>Biscuits 1</h3>
<p>Price: IDR 12000</p>
</div>
</a>
<a href="#" class="list-content">
<div class="detail-content">
</div>
</a>
<a href="#" class="list-content">
<div class="detail-content">
</div>
</a>
</div>
</div>
Because the .list-content items are inline blocks, when you add a text content you have to vertically align them. Add vertical-align: top to .list-content:
.list-content {
display: inline-block;
width: 25%;
height: 200px;
background-color: black;
margin-top: 10px;
vertical-align: top;
}
And remove the top margin from :
h3 {
margin-top: 0;
}
{
width: 50%;
}
.line {
border-top: 5px solid black;
}
.list-content {
display: inline-block;
width: 25%;
height: 200px;
background-color: black;
margin-top: 10px;
vertical-align: top;
}
.detail-content {
display: none;
width: 100%;
height: 75%;
background-color: rgba(255, 255, 255, 0.6);
}
.list-content:hover .detail-content {
display: block;
}
h3 {
margin-top: 0;
}
<div id="content">
<h1 class="head-content">Biscuits</h1>
<div class="line"></div>
<a href="#">
<div class="list-content">
<div class="detail-content">
<h3>Biscuits 1</h3>
<p>Price: IDR 12000</p>
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
</div>