Grid Layout is a powerful CSS module that allows web developers to create complex and flexible grid-based layouts for their web pages. It provides a two-dimensional grid system, dividing the available space into rows and columns, where elements can be positioned and aligned precisely.
With Grid Layout, you can define both the structure and the placement of elements on a webpage, giving you fine-grained control over the layout. It offers a comprehensive set of properties and functions that enable you to create responsive and dynamic designs.
The key concepts in Grid Layout include:
1. Grid Container: The parent element that establishes the grid context. It can be any block-level element, such as a <div>, which contains grid items.
2. Grid Items: The child elements of the grid container that are placed within the grid. They can be any HTML elements like <div>, <article>, <section>, etc.
3. Grid Tracks: The horizontal and vertical divisions of the grid, forming rows and columns respectively. You can specify the size of tracks using fixed values (pixels, percentages) or flexible units (fr, auto).
4. Grid Lines: The lines that define the boundaries of the grid tracks. They can be numbered (starting from 1) or named to refer to specific rows or columns.
5. Grid Areas: Named regions within the grid, created by grouping cells together. By assigning names to areas, you can easily position elements in the layout.
To create a grid layout, you define the grid on the container element using the display: grid; property. You can then specify the size and alignment of tracks, place items in specific grid areas, and control their order using a variety of properties such as grid-template-columns, grid-template-rows, grid-gap, grid-area, grid-column, grid-row, and more.
Grid Layout provides advanced features like auto-placement, which automatically positions items without explicit placement instructions, and the ability to create nested grids within grid items for complex designs.
By utilizing the power of Grid Layout, web developers can achieve responsive and adaptive layouts, easily reordering and repositioning elements as needed. It offers a flexible alternative to traditional layout methods, making it an invaluable tool for building modern and visually appealing websites.
HTML CODE
<div class="container">
<div class="container-div">
<div class="box">
<ion-icon name="wifi-outline"></ion-icon>
<h1>Heahing-1</h1>
<p>Lorem ipsum dolor sit amet adipisicing elit. Temporibus ea fugit recusandae veniam voluptatum animi
repellendus molestias, minus eaque omnis numquam ratione provident sequi voluptatem.</p>
<button>Read More</button>
</div>
<div class="box">
<ion-icon name="wifi-outline"></ion-icon>
<h1>Heahing-2</h1>
<p>Lorem ipsum dolor sit amet adipisicing elit. Temporibus ea fugit recusandae veniam voluptatum animi
repellendus molestias, minus eaque omnis numquam ratione provident sequi voluptatem.</p>
<button>Read More</button>
</div>
<div class="box">
<ion-icon name="wifi-outline"></ion-icon>
<h1>Heahing-3</h1>
<p>Lorem ipsum dolor sit amet adipisicing elit. Temporibus ea fugit recusandae veniam voluptatum animi
repellendus molestias, minus eaque omnis numquam ratione provident sequi voluptatem.</p>
<button>Read More</button>
</div>
<div class="box">
<ion-icon name="wifi-outline"></ion-icon>
<h1>Heahing-4</h1>
<p>Lorem ipsum dolor sit amet adipisicing elit. Temporibus ea fugit recusandae veniam voluptatum animi
repellendus molestias, minus eaque omnis numquam ratione provident sequi voluptatem.</p>
<button>Read More</button>
</div>
<div class="box">
<ion-icon name="wifi-outline"></ion-icon>
<h1>Heahing-5</h1>
<p>Lorem ipsum dolor sit amet adipisicing elit. Temporibus ea fugit recusandae veniam voluptatum animi
repellendus molestias, minus eaque omnis numquam ratione provident sequi voluptatem.</p>
<button>Read More</button>
</div>
<div class="box">
<ion-icon name="wifi-outline"></ion-icon>
<h1>Heahing-6</h1>
<p>Lorem ipsum dolor sit amet adipisicing elit. Temporibus ea fugit recusandae veniam voluptatum animi
repellendus molestias, minus eaque omnis numquam ratione provident sequi voluptatem.</p>
<button>Read More</button>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
/* font-family: 'Poppins', sans-serif; */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
transition: .5s linear;
}
.container {
width: 100%;
height: 100vh;
padding: 3%;
}
.container-div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.box {
height: 320px;
background: #eee;
padding: 40px;
overflow: hidden;
z-index: 0;
position: relative;
}
.box::before {
content: "";
width: 15%;
height: 20%;
border-radius: 20% 0% 20% 20%;
background: linear-gradient(151deg, rgba(120, 9, 231, 0.384) 0%, rgba(210, 14, 168, 0.384) 100%);
position: absolute;
right: 0;
top: 0;
transition: .5s;
z-index: -2;
}
.box:hover::before {
width: 100%;
height: 100%;
border-radius: 0%;
}
.box h1 {
font-family: 'Poppins', sans-serif;
padding-bottom: 10px;
z-index: 999999;
}
.box p {
font-family: 'Poppins', sans-serif;
padding-bottom: 10px;
z-index: 999999;
font-size: 15px;
line-height: 30px;
padding-bottom: 10px;
}
.box button {
padding: 10px;
background: #00000090;
color: #eee;
font-family: 'Poppins', sans-serif;
cursor: pointer;
}
.box:hover button {
background: #eee;
color: #000;
}
.box:hover {
color: #fff;
box-shadow: 10px 10px 20px #ababab,
-10px -10px 20px #fff;
}
.box ion-icon {
font-size: 30px;
position: absolute;
right: 3%;
top: 11px;
transform: rotate(-130deg);
color: #fff;
}
Comments
Post a Comment