CSS Grid Layout Tutorial—Styling a Django Template

CSS Grid Layout Tutorial—Styling a Django Template

In this post we will give you information about CSS Grid Layout Tutorial—Styling a Django Template. Hear we will give you detail about CSS Grid Layout Tutorial—Styling a Django TemplateAnd how to use it also give you demo for it if it is necessary.

Throughout this tutorial, we’ll learn about CSS Grid Layout. We’ll be using a Django template.

There are many popular techniques for creating responsive layouts. In this tutorial, we’ll be building a simple Django web application with a modern UI styled with CSS Grid layout.

By building the UI using CSS Grid, you’ll learn about many useful and easy techniques for achieving popular requirements such as centering and spanning items, switching layouts depending on the screen size and creating responsive UIs.

Before, we dive into practical steps, let’s first introduce CSS Grid.

What is CSS Grid?

CSS Grid is a modern 2-dimentionnal system for creating HTML layouts. It’s now supported by most web browsers. It makes creating professional and complex layouts more easier than ever!

CSS Grid Layout allows you to build advanced grid layouts in CSS instead of HTML like the case for tables for example.

Unlike CSS floats and HTML tables you can create a grid layout in a straightforward way. You simply need to use an HTML element with its display property set to grid or inline-grid. This way, any elements contained in the parent element or the container becomes grid items. If you don’t specify any other CSS Grid property, the items will be automatically arranged in a grid structure thanks to a powerful grid algorithm.

If you need more control over the grid items, you can use different CSS Grid properties to specify the different options for the items including position.

Prerequisites

If you want to follow this tutorial, step by step to build a CSS Grid UI for your Django application. You will need a few requirements. You need to have;

  • A development environment ready with Python 3 and PIP installed,
  • Basic knowledge of Python,
  • Working knowledge of Django.

Creating a Virtual Environment & Installing Django

Now let’s start by creating a virtual environment that will allow you to isolate your project’s dependencies from the other Python dependencies installed on your system.

Go to your terminal and run the following command to create a virtual environment using the venv module included in Python 3.

$ cd ~$ python3 -m venv env

Next, you need to activate this environment using:

$ source env/bin/activate

Now, you can install Django using pip:

$ pip install django

Creating a Django Project

After installing Django, you now need to create a project. Head back to your terminal and run the following command:

$ django-admin start css
$ django-admin.py startproject cssgriddemo

This command will generate a project named cssgriddemo.

Creating a Django Application

Now that you have created a Django project, you need to create a Django application. Head over to your terminal and run the following command to create the app:

$ python manage.py startapp gridui 

Next, add it to the list of installed apps in the settings.py file:

INSTALLED_APPS=[# [...]'gridui']

Next, we need to add a template and a view function.

Open the gridui/views.py file and add the following import:

fromdjango.views.generic.baseimportTemplateView'''Nextaddthefollowingviewclass:'''pythonclassHome(TempateView):template_name='gridui/index.html'

Next, add the gridui/index.html template with the following code:

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>Django UI with CSS Grid Layout</title></head><body><divclass="header"><h1>Django UI with CSS Grid Layout</h1></div><divclass="sidebar">.sidebar</div><divclass="main"><divclass="item"><span>1</span></div><divclass="item"><span>2</span></div><divclass="item"><span>...</span></div><divclass="item"><span>12</span></div></div><divclass="footer">Copyright 2018</div></body></html>

We create an HTML template with the header, sidebar, main and footer sections. In the main section, we include a set of items.

Finally, let’s add an URL to our urls.py file

fromdjango.urlsimportpathfromgriduiimportviewsurlpatterns=[# [...]path('',views.Home.as_view())]

You can now migrate your database and run the Django server:

$ python manage.py migrate$ python manage.py runserver

You application will be running from localhost:8000.

This is a screenshot of our interface at this point:

CSS Grid

Next, let’s add basic CSS styling. Add a <style> tag and add the following styles:

<style>body{background:#478dee;margin:5px;padding:0px;font-family:-apple-system,BlinkMacSystemFont,SegoeUI,Roboto,Oxygen,Ubuntu,Cantarell,FiraSans,DroidSans,HelveticaNeue,sans-serif;}div.header{text-transform:uppercase;}</style>

This is a screenshot of the interface:

CSS Grid

Adding CSS Grid

Now that we have created a simple HTML structure, we can proceed by styling the UI using CSS Grid.

First we need to make the <body> element a grid container and define the grid columns, rows and areas:

body{//[...]display:grid;grid-gap:0.2vw;height:100vh;grid-template-columns:150px1fr;grid-template-rows:120px1fr61px;grid-template-areas:"header   header""sidebar content""footer footer";}

We use display:grid pair to make <body> a grid container. We also set a grid gap of _0.2vw.

We make use of grid-template-columns to define two columns, the first column has a fixed width of 150px and the second column has the remaining width.

fr is a fractional unit and 1fr means the element should take 1 part of the available space.

Next, we use grid-template-rows to define three rows:

  • The first row has a fixed height of 120px ,
  • The third row has a fixed height of 61px,
  • The second row has the remaining space (1fr).

We finally use grid-template-areas for assigning the virtual cells, resulted from the intersection of columns and rows, to areas.

Now we need to define those areas specified in the areas template using grid-area:

div.header{grid-area:header;}div.sidebar{grid-area:sidebar;background:#0769f3;}div.footer{grid-area:footer;background:#3581eb;}div.main{grid-area:content;}

This is the screen shot of the result now:

Adding a Nested CSS Grid

Now that we have created the main layout of the page, let’s use CSS Grid to create a nested grid in the content area.

Grid children can also be Grid containers.

Let’s define the content area as a grid container. In the <style> tag, add the following CSS:

div.main{display:grid;grid-gap:0.2vw;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:repeat(auto-fill,minmax(150px,1fr));}

Here we use repeat, auto-fill and minmax to define columns and rows.

Also add the following style to use an image background for items:

div.item{background-image:url('https://source.unsplash.com/daily');}

This is the screen shot of the result after adding more <div > elements: :

CSS Grid grid-column, grid-row and span

CSS Grid enables you to control the position of grid elements using grid-column and grid-row.

You can also use span to define how much columns or rows a specified element takes.

Now back to our project. Let’s span the second item of the content area across five columns and two rows and position it from column line 2 and row line 1 (default location).

div.main>div.item:nth-child(2){grid-column:2/span5;grid-row:1/span2;}

This is a screen shot of the result:

Conclusion

In this tutorial you’ve seen how to create a beautiful UI for a Django application using CSS Grid Layout.


Hope this code and post will helped you for implement CSS Grid Layout Tutorial—Styling a Django Template. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US