CSS Grid - A Better way to style your web page

Diganta Chaudhuri — Fri, 17 Jun 2022 08:01:48 +0000

CSS Grid is one of the modern way to write and design webpage. CSS Grid can do such things that Flexbox can't. In this post you will learn some of the basics as well as some advanced CSS Grids tips and tricks to get familiarity about it. So lets get started! 😍😍😍

Making a div/section/main/ or any other block level element as display grid will not work as it is we have to specify with ROWS and COLUMNS with it. Like this:

div {
  display: grid;
  grid-tamplate-columuns: 500px 500px 400px;

}

grid-tamplate-columuns: 500px 500px 400px; This line will brake that div element into 3 separate columns in size 500px 500px and 400px. A better way to write unit in grid is fr.
if you want 3 columns same size then just write
grid-tamplate-columuns: 1fr 1fr 1fr; or in short you can use repeat function grid-tamplate-columuns: repeat(3,1fr);
or if you want make rows you can use grid-tamplate-rows.
If you want to make dynamic rows or column you can use
grid-auto-rows / grid-auto-columns followed by the size of that row / column. It's very easy isn't it?😃😃

Now you have created a grid and make some rows or columns now you have to give some gaps or space between the rows or columns don't worry css grid got you... Just use grid-gap or short hand gap property and followed by how much you want to give Thats it....

Now you may want to place items inside the grid... like you may want to shift a p tag or any you can use align-items / justify-items.
Always remember align-items or justify-items will work on parent element only means which tag you have made grid.
If you want to reposition the child element with tagging that element you have to use align-self / justify-self.
The short hand of this can be place-self or place-items;

The other common term is grid-column-start, grid-column-end, grid-row-start, grid-row-end which is related to positioning of the each of the row or columns.
Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

syntax can be reduced to grid-column or grid-rows respectively.

There are many property that css grids provides us but we need some of them above properties are most important among them.

Thank you🌺🌺

You can learn more about css grids from MDN Css grids page or CSS tricks . com page they are awasome resourses.

Blind 75 - 1. Two Sum Javascript

Diganta Chaudhuri — Thu, 16 Jun 2022 13:04:11 +0000

One Of the most popular problem of leetcode is 2 sum. This problem can be solved through many ways like 2 pointers, hashing... out of them if Input array is not sorted then the hashing approach is better in terms of Time Complexity. If input array is sorted then the two pointer approach will be better in that case Space Complexity will be reduced down to O(1).
The Hashing approach is:

var twoSum = function(nums, target) {
    const mp = new Map();
    for (let i = 0;i < nums.length;i++) {
        let rem = target - nums[i];
        if (mp.has(rem)) {
            return [i, mp.get(rem)];
        }
        mp.set(nums[i], i);
    }
    return [-1,-1];
};

The time complexity of this approach is O(N), space complexity is O(N)

If the input array is sorted then we can farther optimise this solution by using 2 pointers
we can place 2 pointers in the both ends

var twoSum = function(nums, target) {
    let i = 0, j = nums.length-1;
    while (i < j) {
        const sum = nums[i]+nums[j];
        if (sum == target) {
            return [i, j];
        } else if (sum < target) {
          i++;  
        } else {
            j--;
        } 
    }
    return [-1, -1];
};

NOTE: This solution will not work in leetcode because we have to return the indexes so if we sort the input array then it will messed up the indexes.

The Time Complexity of this approach is O(N) and Space Complexity is O(1).

Forem: Diganta Chaudhuri

CSS Grid - A Better way to style your web page

Blind 75 - 1. Two Sum Javascript

The time complexity of this approach is O(N), space complexity is O(N)