.png)
"Create a Display Grid Layout" is a powerful and flexible technique used in web development to structure and arrange elements on a webpage. It allows you to create complex, responsive layouts with ease by dividing the page into a grid of rows and columns.
With the display grid layout, you have complete control over the positioning and alignment of elements within the grid. You can specify the size and width of each row and column, as well as control the spacing between them. This level of control enables you to create visually appealing and organized designs.
The layout is created by defining a parent container as the grid and specifying its properties. This container becomes the grid's parent element, and its direct child elements are placed within the grid cells. You can assign specific grid areas to the child elements, allowing you to position them anywhere within the grid.
Furthermore, the display grid layout supports both fixed and flexible sizing. You can set fixed sizes for rows and columns, ensuring elements maintain their dimensions. Alternatively, you can use flexible sizing, where rows and columns automatically adjust their size based on the content they contain or the available space on the screen.
The display grid layout also provides powerful alignment options. You can align items horizontally and vertically within each grid cell, or even span across multiple cells if needed. This capability is particularly useful for creating responsive designs that adapt to different screen sizes and orientations.
By combining these features, developers can create intricate and dynamic layouts that adapt to various devices and user preferences. It empowers designers to achieve pixel-perfect control over their web pages and enables seamless responsiveness for a consistent user experience.
In summary, "Create a Display Grid Layout" is a flexible and robust technique that revolutionizes web layout design. With its powerful capabilities, developers can craft visually appealing, responsive, and highly functional web pages.
HTML CODE
<section class="blog" id="blog">
<div class="blog_div">
<div class="blog_box">
<img src="img1.jpg">
<div class="conent">
<div class="nav">
<h2>Thailand</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
</div>
<p>The next flight is on 26th Dec</p>
</div>
</div>
<div class="blog_box">
<img src="img2.jpg">
<div class="conent">
<div class="nav">
<h2>Maldives</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
</div>
<p>2 flights every week</p>
</div>
</div>
<div class="blog_box">
<img src="img3.jpg">
<div class="conent">
<div class="nav">
<h2>Hong Kong</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
</div>
<p>Daily 1 flight</p>
</div>
</div>
<div class="blog_box">
<img src="img4.jpg">
<div class="conent">
<div class="nav">
<h2>Thailand</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
</div>
<p>The next flight is on 12th Oct</p>
</div>
</div>
</div>
</section>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
transition: .2s linear;
font-family: 'Roboto', sans-serif;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: transparent;
}
body {
background: #222529;
}
/* ================================== */
.blog {
width: 100%;
height: auto;
padding: 100px 50px;
}
.blog_div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.blog_box {
height: 420px;
overflow: hidden;
border-radius: 30px;
}
.blog_box img {
width: 100%;
height: 100%;
}
.blog_box:hover img {
transform: scale(1.2);
}
.conent {
width: 100%;
height: 200px;
position: relative;
top: -30%;
background: rgba(0, 0, 0, .5);
padding: 10px 20px;
opacity: 0;
}
.conent .nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
}
.conent .nav h2 {
color: #eee;
font-size: 30px;
font-weight: 600;
font-family: 'Tilt Neon', cursive;
}
.conent .nav h2 ion-icon {
color: yellow;
font-size: 30px;
position: relative;
top: 2px;
padding: 0 3px;
}
.conent p {
font-size: 18px;
color: rgba(255, 255, 255, .7);
padding: 5px 15px;
}
.blog_box:hover .conent {
opacity: 1;
}
Comments
Post a Comment