Drupal 8 - How To Create A Responsive Grid

hey guys I was asked how to create this kind of grid with views so here is one way to do it first of all I'm using bootstrap sub-team you can search for bootstrap here to find the tutorial next we create an image style so called the configuration media image Styles at image style and let's call this 300 to 200 and add scale and crop effect you called the structure use at new view now let's call this responsive grid and we will so articles and create a block and we will use unformatted list of fields let's so nine items so we will start with themit's field and we will exclude this from the display and select the image style we just created and we link it to nothing next edit the title settings so we will exclude this also and we don't have to link it to the content and to help to target this field later with CSS we are going to wrap it with paragraph tags so let's overwrite the output and put paragraph tags around it normally you would use the style settings here too that the paragraph wrapper but the trimming option here removed that element so we need to do it like this so we need to dream the maximum number of characters if the titles are too long and let's add these ellipses at the end and let's select also this and apply next let's add path field so this will provide the link to the content and we exclude this also and finally we add a global custom text that perhaps all these items together custom text and here in the replacement patterns you can find the tokens you can use so we will first print out the image and then the title and then we output this as a link apply so let's see what we have at this point let's position this block so call it the block layout and place block you and let's solve it only in the front page and also we should hide the title and position it on top of the main page content so this is what we see before we have any styling and we don't have the grid yet so let's add the bootstrap classes edit the view and code the format settings and here we can add a bootstrap class to every row so this will create three columns and also here in the advanced setting let's add a class for the whole view let's save this and we should have a grid and now the only thing we have to do is to apply some CSS styling so let's add margin on the top and style the images we will be using image with 100% so these images will fill in the whole column size let's add some border padding and border radius a little indication that we are hovering a link like that you could also use jQuery to create clickable rows but in this tutorial I wanted to use just views for this and now the title so I added the paragraph element around it so we can target it so let's do that let's use relative positioning 60 pixels from the bottom and 6 pixels from the left that sense the color of the white and add some padding then the background let's use RGB a so we can add transparency the background let's add 50% and now it is a block but let's make it inline element and you might also remove the text decoration when you hover over it like that so now we have a clickable responsive grid made with views and if this kind of thing happens that means that those titles are all flowing so you could either make the font smaller or trim the titles even more or make this new column wide in this breakpoint size but let's trim the title so select title and let's use only 20 characters and there we go alright thanks for watching if you like this video please like share comment and subscribe see you in the next tutorial bye

Channel: Samuli Natri

Views: 32,896

Rating: 4.8709679 out of 5

Keywords: WDTutorials.com, wdtutorials, web, design, development, tutorials, tutorial, Web Development (Industry), video, instructional, Drupal, Drupal 8, Grid, Views, Article, Responsive

Id: XOIOrNKh3FI

Length: 9min 10sec (550 seconds)

Published: Fri Oct 21 2016