Home React JS Building a Responsive Website with Flexbox Grid

Building a Responsive Website with Flexbox Grid

2 min read
0
0
209

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.

 

 

 

    Load More Related Articles
    Load More By admin
    Load More In React JS

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Check Also

    Electricity Bill Calculation using Java Application

    This tutorils teach Electricity Bill Calculating based on the below conditions step by ste…