Responsive CSS Grid Tutorial | Responsive Web Layout with CSS Grid

In this video I go over how I use CSS Grid to make responsive layouts. I show you how to take Sketch designs to create the layout structure. Then I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then make the grid in CSS. I use grid-template-columns and grid-template-rows to define the number and size of each element and then I use grid-template-areas to define each block of the design.

Once the web design is completed I show you how to make this design responsive by adding an '@ media' and defining the columns, rows and areas for the mobile view. Finally I apply CSS styling to the font, colors and alignment to make the final polished design.

View the Code here: https://codepen.io/angeladelise/pen/YzXLdyq?editors=1010

In this video I show you:
0:16 - How to get started with a Sketch layout design
1:11 - How to add grid lines
1:22 - How to define the columns
1:51 - What is FR
2:03 - How to define the rows
3:17 - The HTML code
4:24 - Display Grid
4:50 - How to create the columns with CSS
5:26 - How to create the rows with CSS
7:09 - How to use grid template area
8:05 - How to write grid template area in CSS
10:16 - How to add a column and row gap
11:02 - How to make this design responsive
13:40 - Add CSS variables
14:34 - How to add font styling
15:26 - Overview of CSS Grid

How to use CSS Grid to build a responsive web layout

CSS Grid is an easy-to-use tool that helps developers design seamless and consistent web applications using rows and columns.

CSS Grid layout is a two-dimensional grid system designed to help web developers divide elements into columns and rows in order to create a consistent and seamless layout for web applications.

The logic behind CSS Grid is that, if a developer takes an element like a div and displays a grid in it, they can then split the element into columns and rows — collectively known as tracks — where items can be taken and placed in the grid. With CSS Grids, this can all happen without the extra work of using positioning properties (top, right, left, bottom).

There are instances where one would use CSS frameworks and others where one would use CSS Grid, but as with most things in web development, it depends on your use case.

In this article, we’ll focus on basic design using rows, columns, and areas to build a simple responsive web application using CSS Grid.

CSS Grid: Basic terminology

Let’s start by taking a few moments to understand some of the core fundamentals of CSS Grid.

Grid container – the box that holds the grid. This is the main building block of the CSS Grid
Grid cell – a one by one unit on a grid
Grid area – either a single cell or multiple cells that take the form of a square or rectangle (but not an L-shape)
Grid tracks –the collection of rows and columns, defined using grid-template-columns and grid-template-rows properties
Grid gaps – help to create spaces on the grid. You can not have contents on or within a grid gap.
Explicit grid – defined by you using grid-template-columns and grid-template-rows
Implicit grid – defined for you by the browser

Getting started with CSS Grid

Display the grid container and elements

The grid container is the starting point for displaying a grid on an element. To get going with grid, we must first display the grid on the container using the syntax below:

display: grid;

In CSS Grid, the relationship between the grid container and its items (elements) is that of parent and children, respectively. Every grid has a container which contains items, and every element placed on a grid is a grid item.

When you make a container a grid ( display: grid;), all of its direct children become grid items automatically.

<div class="container"> <div class ="item item1">1</div> <div class = "item item2">2</div> </div> .container{ display: grid; }

But displaying items as a grid does not do much on its own. This is where other concepts like grid-template-columns and grid-template-rows come into play, as you will see in our demo app code snippet below.

Using the `fr` unit and `repeat()` notation

While we can always use fixed units of measurements like px in defining grids, CSS Grid layout also introduces a new unit of measurement called the fr unit.

The fr unit represents a fraction of the available space in the grid container and can be used to create flexible grid tracks.

Here’s an example:

.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}

The above code snippet will split the available space into four parts: two parts will be assigned to the first track, while the remaining two parts will be assigned one track each according to the available space left. This helps ensure consistency when building your grid.

The repeat() notation also helps ensure consistency and can be used to repeat all or part of a track listing like so:

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

Demo: Building a web app with CSS Grid

Read Also: The Ultimate Guide to CSS Grid

I have included the complete CodePen here, but below, I will break down the code snippets with some internal comments to show how to build the web app using CSS Grid.

HTML

First, we will create a simple HTML template and fill it with some dummy text to help establish some structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset=utf-8>
  <title>Demo Responsive CSS Grid Site</title>
  <link rel="stylesheet" href="/main.css">
</head>

<!-- Main body of the site where we have the container --> 

<!-- this div contain all elements that will be visible on the screen -->

<div class="container">     
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>  
  </nav>
  <main><h2>A Demo Site showcasing CSS Grid</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque pariatur possimus alias quod ratione incidunt dicta assumenda repudiandae optio eveniet, quisquam fuga! Nam eaque fuga similique quia, esse non libero?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo libero doloremque, eum quis laudantium hic iste ab sed ipsum veniam, quam dolor rem cupiditate corrupti aliquam repudiandae officia soluta impedit!</p>
  </main>
  <div class="sidebar img"><h2>Find Me on Social Media</h2>
    <p><a href="https://twitter.com/charliecodes">Twitter</a></p>
    <p><a href="https://www.linkedin.com/in/charleseteure/">LinkedIn</a></p>
  </div>
  <div class="about"><h2>About </h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt voluptatem reprehenderit non. Magni sit alias quia, vel quidem autem quos optio quam at porro aliquid necessitatibus aut et eos nulla.</p>
  </div>
  <div class="contact"><h2>Contact</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi consequuntur magnam ipsum, commodi quam, non dolorem numquam veritatis, qui nam voluptas asperiores neque magni. Placeat, natus reprehenderit. Fugit, voluptatum commodi.</p>
  </div>
  <footer>Built with <3 by <a href="https://twitter.com/charliecodes">Charles Freeborn</a></footer>
</div>
</html>

CSS

Here, we will link the stylesheet (CSS) to our HTML template and implement the layout using CSS Grid. We have added some comments with the code snippets to help with clarity.

body{
  background: #F1F0EE;
  margin: 0;
}

.container {
   /* first, create a grid container */

  display: grid;        
  
  /* define the amount and size of each column. Here we define 4 columns with equal fractions  */

  grid-template-columns: repeat(4, 1fr); 

  /* create horizontal tracks as rows and here we create 4 rows with different sizes  */
  grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr; 

  
/* define where each element will be in the grid. We achieve this with grid-template-areas */

  grid-template-areas:
    "nav nav nav nav"
    "main main main main"
    "about about about sidebar"
    "contact contact contact sidebar"
    "footer footer footer footer";

/* we can set gaps - gutters between the rows and columns*/

  gap: 0.5rem;
  height: 100vh;
  font-weight: 800;
  font-size: 12px;
  color: #004d40;
  text-align: center;
}
 /* Styling the Nav starts here */

nav{
  background-color: #3770F6;
  grid-area: nav;
}

nav ul{
  list-style: none;
  font-size: 16px;
  font-weight: bolder;
  float: left;
}

li{
  display: inline-block;
}

li a{
  color: #ffffff;
}
  /* Styling the Nav ends here */

a:hover{
  color: #FF7F50;
}

main {
  grid-area: main;
}

main h2 {
  font-weight: bolder;
}

main p{
text-align: left;
}

.sidebar {
  background: #D3D4D7;
  grid-area: sidebar;
}

.about {
  background: #D7D6D3;
  grid-area: about;
}

.contact {
  background: #BDBCBB;
  grid-area: contact;
}


footer {
  background-color: #3770F6;
  grid-area: footer;
  color: #ffffff;
}

footer a {
  color: #ffffff;
}

a {
  text-align: center;
  display: block;
  font-family: inherit;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem;
}

/* For */

@media only screen and (max-width: 550px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "about"
      "contact"
      "footer";
  }
}

CSS Grid: Key takeaways

There are many ways to achieve similar objectives in CSS. Using CSS Grid is just one way to place elements into rows and columns to design consistent, seamless web applications with user-friendly interfaces.

#css #html #programming #webdev

What is GEEK

Buddha Community

Responsive CSS Grid Tutorial | Responsive Web Layout with CSS Grid

Gavin Sserubiri

1625061420

13 Cool Simple CSS Grid layout examples

Collection of free hand-picked simple CSS grid examples. Also, it includes a bunch of front-end techniques, tips, and tricks for your future reference. Hope you will like these freebies and find them useful. Happy coding!

Styling the last row of a grid with CSS selectors
Grid Animation Effects
Simple grid mixin
Simple Grid CSS Grid
Simple CSS Grid Hover
Simple css Grid – Responsive
Simple css grid system using scss
CSS variables simple CSS grid
Super Simple CSS Grid
3D Grid UI
Aspect ratio Grid boxes with CSS Variables
Simple grid system
Simple Grid template

#layouts #css grid #grid #layouts #css #css grid layout

Gavin Sserubiri

1625050140

9 Free CSS Masonry Grid Layouts

This is a collection of free CSS Masonry grids. I have found around the Codepen! This Masonry grid allows you to easily create grid layouts in HTML and CSS without having to program the whole thing in JavaScript. CSS Masonry grids are a great way to help layout elements in a grid-like format. If you need some inspiration for your next design layout, see the free CSS Masonry grids below.

CSS Masonry Grid Animation Effects
Using vanilla JS to implement masonry grid
Bootstrap Masonry Grid Template
Vanilla JS Masonry Grid Layout Method
Responsive masonry grid made with ReactJS and flex-box
Display Images On Your Website With The Masonry Grid (Vanilla JS)
Create a Masonry Style Image Grid with Infinite Scroll in Vanilla JS
Isotope & Fancybox Masonry image grid with good animation
Build a CSS Masonry grid Layout with just HTML and CSS

#layouts #css grid #grid #css masonry #css #free

Kiwanuka Timothy

1623211109

CSS Layout Grid

One of the most challenging aspects of building webpages is managing layout. HTML and CSS offer several different methods to control layout. The layout options include using normal flow, floats, multi-column layout, flexbox, and CSS Grid. To allow for more complex layouts, CSS Grid aims to be a major step forward by giving developers more control over layout and arrangement of elements on a web page.

Great Learning Resources

There are several really good and helpful resources available to learn CSS Grid. Here’s a quick rundown of resources that helped me learning CSS Grid.

Visual Examples of Layouts

Interactive Grid Building tools

Fun and Games — to learn CSS Grid

Grid Garden

Setting up the Grid

CSS Grid works by creating a grid container using the display: grid property. The immediate children of the grid container are called grid items.

An essential feature of using CSS Grid is setting up the columns and rows to be used in the grid. This is done with the grid-template-columns and grid-template-rows properties. There are many different ways to set up a grid.

Let’s say we want a grid with five columns. There’s a few ways to set this up. To build columns, we’ll use the grid-template-columns property. To create five columns it’s necessary to add five values, on for each column.

.container {
  display: grid;
  grid-template-columns: 20rem 100px auto 30% 25em;
}

As shown in the code sample, it’s possible to add sizes using different units of measurement, including px, em, rem, %, and auto. CSS Grid also introduces a new unit, fr, which means fractional unit. This is used by assigning size to the grid based on values entered and dividing up the remaining space based on a division of fractional units.

.container {
  display: grid;
  grid-template-columns: 15rem 1fr 2fr;
}

In the example above, 15rem is assigned and the remaining space is divided between the two columns, the 2nd column getting 1fr out of 3 units and the last column getting 2fr out of 3 units.

The same concepts for columns work for rows. Adding the grid-template-rows property allows for the explicit creation of grid rows.

.container {
  display: grid;
  grid-template-columns: 15rem 1fr 2fr;
  grid-template-rows: 20rem 400px;
}

This addition establishes two explicit rows in the grid. The row sizes are defined by units. This code creates a grid that is 3 columns by 2 rows and creates 6 total grid cells. Now it’s time for content to flow into the grid.

<div class="container">
  <h1>Title</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, totam.</p>
  <img src="sun.jpg" alt="Sun" />
  <h4>Image subtitle</h4>
  <p>Velit dolor unde explicabo illum ipsa temporibus, hic sed error.</p>
  <div>Additional content</div>
</div>

The HTML above includes a <div class="container"> that is used as a grid container. The 6 elements that are the immediate children of the div are the grid items. Since there are only 6 items, each one will fit into the 6 grid cells defined in the CSS code above. If another grid item is added, however, this will now be a total of 7 children element. In this case, CSS Grid will automatically create a new row to include this element. The new row constitutes what is known as the implicit grid - automatically added to the grid, although not explicitly defined.

There are certain situations where a developer does not know exactly how many rows may be needed for a grid — in the case of repeating or auto-generated content, for example. In these situations, it’s possible to make use of the grid-auto-columns and the grid-auto-rows properties. These properties set a pre-determined size for implicitly created columns and rows.

#css-grid #grid-layout #layout #css

Skenix Infotech

1599217456

Mobile Responsive Web Design

Mobile responsive website design will make your site mobile-friendly, improve the way it looks on devices with both large and small screens, increase the amount of time that visitors spend on your site and help you improve your rankings in search engines.

Contact now to Get the best website design services at a reasonable price from Skenix Infotech.

#responsive web design company in india #responsive web design services #hire web designer #mobile responsive design #responsive web design #mobile web design

Web Monster

1677108125

Creating a Responsive Blog with HTML, CSS, and JavaScript

Are you looking to build a professional-looking blog with HTML, CSS, and JavaScript? In this video

tutorial, we'll walk you through the process of designing and developing a blog from scratch, step-by-step.

From creating the layout of your blog with HTML and CSS to adding interactivity and functionality with JavaScript,

we'll cover everything you need to know to create a fully functional blog. Whether you're a blogger,

web developer, or simply looking to learn new skills, this tutorial is for you!

We'll also provide some tips and tricks along the way to help you optimize your blog for search engines, improve your website's accessibility, and enhance the user experience.

🔔 Subscribe for more!

https://www.youtube.com/channel/UCHI9Mo7HCSlqum1UMP2APFQ

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

🔗 Source code

https://upfiles.com/KO0VqqK

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

☝ Start developing the project (base files + images)

- Click on the UpFiles link

- Click the green button (code)

- Click Download ZIP

- Extract the project to the desired location

📂Assets

Icons: https://boxicon.com/

Fonts: https://fonts.google.com/

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

🔥 Follow me!

Facebook

https://bit.ly/3IMfk04

Instagram

https://bit.ly/3GHoQyT

Twitter

https://bit.ly/3IOBEqc

https://bit.ly/3INnwNY

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Tags:

#responsiveportfolio #portfoliohtmlcssjs #webmonster #html #css #javascript #webdesign #website #react #blog, #HTML #CSS #JavaScript #web_development #responsive_design #accessibility #user_experience #tutorial.

So, if you're ready to start building your own blog, this video is the perfect place to start. Be sure to like this video and subscribe to our channel for more web development tutorials and tips!

Link of The Video :

https://youtu.be/BqgWIel4uuU

Responsive CSS Grid Tutorial | Responsive Web Layout with CSS Grid