React JS

Building a Responsive Website with Flexbox Grid

Flexbox CSS is a powerful layout module that allows you to create flexible and responsive web designs.  you can easily create complex layouts design without complicated CSS hacks.

it can be aligned using various properties, such as flex-directionjustify-contentalign-items. These properties allow you to control the direction, spacing, and alignment of the flex items.

index.html

<div class="container">
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
       
</div>

style.css

.container {
    border: 1px solid red;
     display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
     
}

.item{

width: 100%;
height: 100%;
background-color: red;

}

Grid CSS

CSS Grid, you need to define a container element as a grid by setting its display property to “grid”. You can then create grid items inside the container using the grid-template-rows, grid-template-columns, and grid-gap properties.

<div class="container">
    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>

    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>
</div>

style.css

.container {
    border: 1px solid red;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    grid-gap: 2rem;
    height: 80vh;
   
}

.item{

width: 100%;
height: 100%;
background-color: red;

}

i attached the video link below. which will do this tutorials step by step.

 

 

 

admin

Recent Posts

Employee Working Hours Calculation System using C#.net

Initialize the employee number, Hourswork,and Hoursrate to calculate a grosswage use the following condition. if…

1 week ago

Java Payroll System Calculate Employee Overtime

Act as a Java developer to create a program that calculates the gross wage for…

2 weeks ago

Employee Working Hours Calculation System using Java

Initialize the employee number, Hourswork,and Hoursrate to calculate a grosswage use the following condition. if…

2 weeks ago

Laravel 11 School Management System

In this tutorial, we will teach you how to create a simple school management system…

3 weeks ago

How to Make Admin Panel Using React MUI

I have design the Admin Basic templete using React MUI Design Admin Dashboard and Login.Here…

1 month ago

Install Laravel Breeze for Authentication Using Laravel 11

In this tutorial ,i am to going teach the Laravel Breeze.Laravel Breeze provides a simple…

1 month ago