"I am Saqib Jahangir. A passionate vlogger, software engineer, trainer and avid traveler with a deep love for exploring the hidden gems of our beautiful planet. With a strong foundation in Application Development, Application Architecture & Database Design and Product Management, I bring over a decade of hands-on experience building secure, scalable, and resilient web applications for a diverse range of industries."

Grid Layout

 

CSS Grid is a two-dimensional layout system that allows you to create complex and responsive web designs with rows and columns. Unlike Flexbox, which is mainly for one-dimensional layouts (either row or column), Grid gives you full control over both dimensions, making it ideal for building entire page layouts or complex components.

Why Use CSS Grid?

·         Create grid-based layouts easily without relying on floats or positioning hacks.

·         Control rows and columns simultaneously.

·         Align and space content precisely.

·         Build responsive designs that adapt to different screen sizes.

·         Define explicit grid areas for easier management.

How CSS Grid Works

To start using Grid, you set the container’s display property to grid or inline-grid:

.container {
  display: grid;
}

This turns the container into a grid container, and its children become grid items.

Main Concepts and Properties

·         grid-template-columns / grid-template-rows
Define the number and size of columns and rows. Example:

grid-template-columns: 200px 1fr 2fr;
grid-template-rows: 100px auto;

This creates three columns (fixed 200px, flexible 1 fraction unit, and double flexible 2 fraction units) and two rows (fixed 100px and auto height).

·         grid-gap (or gap)
Adds spacing between rows and columns.

·         grid-column-start / grid-column-end & grid-row-start / grid-row-end
Control where an item starts and ends within the grid.

·         grid-area
A shorthand to specify the grid item's position in rows and columns.

·         justify-items / align-items
Control the alignment of items inside their grid cells horizontally and vertically.

·         justify-content / align-content
Align the entire grid within the container.

Example

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
 
.item1 {
  grid-column: 1 / 3; /* spans two columns */
  grid-row: 1;
}

This creates a three-column grid with equal widths and a 10px gap between grid items. The first item spans the first two columns.

 

Popular Posts

Operators (Arithmetic, Comparison, Logical)

  Operators in PHP are symbols that perform operations on variables and values. They are essential for performing calculations, comparing values, and making logical decisions in your code. PHP supports several types of operators, including arithmetic, comparison, and logical operators. Arithmetic Operators Arithmetic operators are used to perform basic mathematical operations. Example: <?php $a = 10; $b = 3;   echo $a + $b; // 13 echo $a - $b; // 7 echo $a * $b; // 30 echo $a / $b; // 3.3333 echo $a % $b; // 1 (modulus) echo $a ** $b; // 1000 (exponentiation) ?> Comparison Operators Comparison operators are used to compare two values. They return true or false . Example: <?php $x = 5; $y = 10;   var_dump($x == $y);   // false var_dump($x != $y);   // true var_dump($x === $y); // false (checks value and type) var_dump($x !== $y); // true var_dump($x > $y);    // false var_dum...
Read more

Functions (Built-in & User-defined)

  Functions in PHP are blocks of code designed to perform a specific task. They help make code reusable, organized, and easier to maintain. PHP provides built-in functions for common tasks, and also allows you to create your own user-defined functions . Built-in Functions PHP has hundreds of built-in functions that perform predefined operations such as string manipulation, mathematical calculations, and array handling. Example (Built-in Functions): <?php // String length echo strlen("Hello World"); // Outputs: 11   // Find maximum value in an array echo max(10, 20, 30); // Outputs: 30   // Convert string to uppercase echo strtoupper("php is awesome"); // Outputs: PHP IS AWESOME ?> User-defined Functions You can create your own functions to execute code whenever needed. This helps reduce repetition and makes programs easier to read. Syntax: function functionName($parameter1, $parameter2) {     // Code to...
Read more