CSS Grid layout: Create a Web page Picture Slide Gallery Special effects

Article Introduction: Here we guide you to use the grid layout to create a picture gallery of the Lightbox effect. We use the grid layout to organize the content of the page, and use the media query to optimize the layout, for horizontal screen vertical screen can be viewed. In the vertical screen, the browser height is greater than its width, and in the horizontal screen, the browser width is greater than its height.

There is no doubt that there are a lot of options when developers talk about page layouts. To ensure that your layout adapts to different devices, orientations, and screen sizes, you need to carefully consider what methods you want to use to lay out the layout. The grid layout is a new layout method that allows you to set the main area of the page in a fixed size or free space within the viewer window, and you can use both simultaneously.

Because grid layouts use the ability to align to columns and rows, but do not have an internal structure, it also makes the scene as described in this article, either impossible or difficult to implement with HTML and CSS styles. But you use grid layout and media query combination, you can make your layout to adapt to set changes, such as positioning, free space and so on.

The CSS Grid Layout specification is still just a work draft, with private prefixes under IE10 to support some properties. A list of supported properties allows you to view the grid layout on MSDN. Because the grid layout specification is evolving, IE10-supported properties may not be identical to the specifications that are developed.

Here we guide you to use the grid layout to create a picture gallery of the Lightbox effect. We use the grid layout to organize the content of the page, and use the media query to optimize the layout, for horizontal screen vertical screen can be viewed. In the vertical screen, the browser height is greater than its width, and in the horizontal screen, the browser width is greater than its height.

Design page

We want this Lightbox effect page to fill the entire screen in the IE10 browser, not the scroll bar. Of course, this page is well displayed in the IE10, so browsers like Chrome should be able to match well.

The following illustration is close to what we really want the Light box page to show. We assume that the selected sketch occupies 16:9 of the screen width of the entire browser.

In this sketch, A is a small area where the logo,b area is used to place the caption or description of the picture, the C area is the browse area of the main picture, and D is the thumbnail image area.

Because the Lightbox page is designed to look full screen, we have to consider different screen sizes. The point of the page is to see the big picture. Therefore, when the screen size expands, we also want to let the picture Panel area C also expand. But to prevent the expansion of area A to the whole screen, but also to prevent the lateral expansion of B area, D area vertical expansion.

Create a Grid

This kind of scene uses the grid to layout is ideal. To help build the grid, we will add dotted lines to complete the invisible gridlines. To prevent the design of page elements from becoming too crowded, we'll add a little space between the elements. Spacing can be a fixed width or height of rows and columns.

In this image, the purple dotted line represents a grid element or a grid container. The red dotted line represents the gridlines.

This is a grid with five or three columns:

• The second row, Shikong, and second column of the grid are spacing.
• The first and last lines are set to a fixed height, the height of the first row is the height of area A, and the height of the last row is the height of area d.
• The height of the third row is adaptive, allowing the layout to fit into different sizes of screens.
• The first column has a fixed width, and the width is the fixed width of area A and area B.
• The width of the last column is adaptive, allowing the layout to fit into different sizes of screens.

Building pages

Let's start by writing a grid tag. First, we write a simple HTML to get a basic structure of the page. Note that the structure order of the area is not created according to the structure of the sketch, but this is an advantage in the grid layout: If you want to reorder, you can rearrange the order of elements without depending on the DOM structure of the document.

<! DOCTYPE html>

<meta content= "ie=10" http-equiv= "x-ua-compatible"/>

<link href= "photogallerystyles.css" media= "screen" rel= "stylesheet" type= "Text/css" >

<body>

<div id= "Body" >

<div id= "Grid" >

<div id= "Text_box" class= "Orange" >text box</div>

<div id= "Big_pic" class= "Red" ></div>

<div id= "Photos" class= "Blue" >Photos</div>

<div id= "logo" class= "green" >

<div id= "logotype" >CONTOSO<br>IMAGES</div>

<div id= "Pagedesc" >Lightbox</div>

</div>

</div>

</div>

</body>

Create a Grid element and specify columns and rows

Now you want to create the grid elements and the specified rows and columns.

The first thing is to add the display attribute to him and set the value to-ms-grid. This creates a grid element.

In grid elements, we use the-ms-grid-columns property to specify the width of each column in a space-delimited list, and also use the-ms-grid-rows property to specify the row height of each row in a space-delimited list.

For example, in this example, the ID of an element is "grid", and our style can be written like this:

#grid {

Height:calc (100vh-65px); /* 65px to account for ScrollBar * *;

Display:-ms-grid;

-ms-grid-columns:200px 25px 1fr;

-ms-grid-rows:160px 25px 1fr 25px 200px;

border:1px solid red; /* For a visual guide * *

}

About fractional Units

To make the grid size itself fit according to the available space, we can use the fractional unit (FR). The size of the fractional unit depends on the amount of free space and the fractional value of the total quantity. In our case, we use only one fractional unit, but more complex layouts are possible. For example, consider a situation where four columns specify the width of: auto 100px 1fr 2fr, so the columns will be displayed as follows:

• First column (keyword Auto): Column widths are determined by the contents of the column.
• Second column (100px): column width is 100 pixels.
• Third column (1FR): The column width occupies the remaining space of one fractional unit.
• Fourth column (2FR): The column width occupies the remaining space of two fractional units.

Because there are three fractional units in the grid, the third column is one of three fractional units, so he occupies one-third of the remaining space. Similarly, the fourth column width accounts for two-thirds of the remaining space.

Assigning page elements to columns and rows

If you look at the current page, this is definitely not ready. All the different elements on the page overlap, because we have not yet defined which column each outer element should be placed in. We can pass:-ms-grid-row,-ms-grid-column,-ms-grid-row-span and -ms-grid-column-span Property implementation.

When applied to a page element, specify which cell the page element starts from, we can use the -ms-grid-row and -ms-grid-column properties. If the text input pattern is left to right, from top to bottom, the-ms-grid-row property specifies that the element occupies the topmost row, and similar you specify that the element occupies the leftmost column, you can use the-ms-grid-column property.

You can use the -ms-grid-row-span and -ms-grid-column-span properties when you want to specify how many rows or columns the elements of your page will span.

Note: If you want to span multiple rows or columns in a grid, and some columns or rows are implicitly created, and their width or height is set to auto (for content), define a number for each column or row:

#text_box {

-ms-grid-row:3;

-ms-grid-column:1;

-ms-grid-row-span:3;

padding:15px;

}

#big_pic {

-ms-grid-row:1;

-ms-grid-column:3;

-ms-grid-row-span:3;

padding:15px;

}

#photos {

-ms-grid-row:5;

-ms-grid-column:3;

padding:15px;

}

#logo {

-ms-grid-row:1;

-ms-grid-column:1;

Text-align:center;

padding:20px;

}

Viewing this page, these selectors also add some other style of code.

Adjust grid items

The page looks great, but I want the picture to be centered in his area. To achieve this effect, we can use -ms-grid-row-align and -ms-grid-column-align to achieve this. These properties define how you want an item to be aligned in rows or columns. In this example, the values for both properties are set to "center" at the same time in "#big_pic" to center horizontally vertically:

#big_pic {

-ms-grid-row:1;

-ms-grid-column:3;

-ms-grid-row-span:3;

padding:15px;

-ms-grid-row-align:center;

-ms-grid-column-align:center;

}

You can look at the effect of this page.

Using grids and media queries

Our layout looks good under the widescreen. What if the device you are viewing is under a vertical screen? In this case, we can use a media query.

Using media queries, we will redefine the layout to accommodate different screen orientations. To add a specific screen orientation style, first add the syntax for the media query:

@media all and (orientation:portrait) {
}

According to the media query, the horizontal screen (orientation:portrait) defines the width of a page larger than his height, whereas the vertical screen (orientation:landscape) defines the height of a page greater than his width.

Now we'll add a new grid layout and some new styles for other page elements. Put these styles in the curly braces of the media query before you:

#grid {

-ms-grid-columns:150px 25px 1fr;

-ms-grid-rows:100px 25px 1fr 25px 100px;

}

#text_box {

-ms-grid-row:1;

-ms-grid-column:3;

-ms-grid-row-span:1;

}

#big_pic {

-ms-grid-row:3;

-ms-grid-column:1;

-ms-grid-column-span:3;

-ms-grid-row-span:1;

}

#photos {

-ms-grid-row:5;

-ms-grid-column:1;

-ms-grid-column-span:3;

-ms-grid-row-span:1;

}

#logo {

-ms-grid-row:1;

-ms-grid-column:1;

Text-align:center;

padding:20px;

}

#logotype {

font-size:15px;

}

#pagedesc {

font-size:12px;

}

#mainphoto {

width:100%;

border-width:10px;

Border-color:white;

}

Now, you can view the final version of the page effect. If you do not have a device to test the rotation of the screen, you can open it with your IE10 and reduce the size of the browser window until the width is less than his height. You can see the effect above.

Create an element overlay grid

The CSS grid provides a number of possibilities for page layouts. For example, a grid can help you create content cascading effects, such as translucent text on a picture. For more information to view the cascading of the grid, you can view the CSS grid overlay sample in the IE development instance.

Summarize

You should now have an idea of the grid layout and how to use the grid properties and media queries, and if you want to learn more, see the links in the next section