Back ArrowExplore all kits

Grid Concepts using HTML and CSS

share link

by vsasikalabe dot icon Updated: Mar 30, 2023

technology logo
technology logo

Guide Kit Guide Kit  

The CSS Grid Layout Module is a grid-based layout system with rows and columns. We can make it easier to design web pages without floats and positioning concepts. Grid Layout using CSS is dividing a page into major regions, or in terms of size, position, and layer, between parts of content from HTML. It is used to align elements into columns and rows like tables.


You must set the display property to the grid or inline grid to make an HTML element behave as a grid container. The grid items are placed inside columns and rows. The grid-template-columns property describes the number of columns in the grid layout. It defines the width of each column. Specify the width of the four columns if you want your grid layout to contain four columns. If all columns should have the same width, then specify with auto. The grid-template-columns property is also used to specify the size (width) of the columns. The grid-template-rows property describes the height of each row. 

The CSS properties for the grid:

  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows


Here is an example of how to perform Grid Concepts using HTML and CSS:

Preview of the output that you will get on running this code from your IDE.

Code

Grid - HTML | CSS

HTMLdotLines of Code : 36dotLicense : Strong Copyleft (CC BY-SA 4.0)

 .item:nth-child(4n),
.item:nth-child(4n-1) {
  order: 1;
  grid-row-start: 2
} 



.container {
  display: grid;
  max-width:100vw;
  overflow-x:scroll;
  grid-template-columns: 50% 50% 50% 50%;
  grid-template-rows: 150px 150px;
}

.item {
  height: 140px;
  margin: 5px;
  background:blue;
  color:white;
 
}
.item:last-child {
  grid-column-end:5;
  grid-column-start:3;
}
<div class="container">
  <div class="item half-width">1</div>
  <div class="item half-width">2</div>
  <div class="item half-width">3</div>
  <div class="item half-width">4</div>
  <div class="item half-width">5</div>
  <div class="item half-width">6</div>
  <div class="item full-width">7</div>
</div>

Instructions

Follow the steps carefully to get the output easily.

  1. Download and Install VS Code on your Computer.
  2. Open the VS Code and install Live Server from Extensions.
  3. Open the new file and save it as filename.html.
  4. Copy the code using the "Copy" button above, and paste it into your html file (paste css style code within the style tag).
  5. Click the Go live button in the bottom right corner to get the output.


I hope you found this useful. I have added version information in the following sections.


I found this code snippet by searching for ' Grid- HTML/CSS' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. Live Server v5.7.9


Using this solution, we are able to do grid concepts using HTML and CSS with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to do grid concepts using HTML and CSS.

Support

  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow

  • © 2023 Open Weaver Inc.