diff --git a/amd/src/report-viewer-components.js b/amd/src/report-viewer-components.js
index c1da739..83538f8 100644
--- a/amd/src/report-viewer-components.js
+++ b/amd/src/report-viewer-components.js
@@ -263,7 +263,7 @@ export default {
             methods: {
                 countLineLayers(line){
                     let maxLayer = -1;
-                    for(let i = 0; i <= this.value.slots; i++){
+                    for(let i = 0; i <= this.page.periods; i++){
                         const slot = line.slots[i];
                         // Determine the amount of used layers in a studyline slit
                         for(const ix in line.slots[i].competencies){
@@ -279,8 +279,36 @@ export default {
                             }
                         }
                     }
-                    return maxLayer+1;
+                    return (maxLayer >= 0)?(maxLayer+1):1;
                 },
+                showslot(line,index, layeridx, type){
+                    // check if the slot should be hidden because a previous slot has an item with a span
+                    // so big that it hides this slot
+                    const forGradable = (type == 'gradable')?true:false;
+                    const periods = this.page.periods;
+                    let show = true;
+                    for(let i = 0; i < periods; i++){
+                        if(line.slots[index-i] && line.slots[index-i].competencies){
+                            const list = line.slots[index-i].competencies;
+                            for(const ix in list){ // Really wish that 'for of' would work with the minifier moodle uses
+                                const item = list[ix];
+                                if(item.layer == layeridx){
+                                    if(forGradable){
+                                        if(i > 0 && (item.span - i) > 0){
+                                            show = false;
+                                        }
+                                    } else {
+                                        if((item.span - i) >  1){
+                                            show = false;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    
+                    return show;
+                }
             },
             template: `
                 <div class='r-studyplan-content'>
@@ -311,13 +339,13 @@ export default {
                         <!-- Line by line add the items -->
                         <!-- The grid layout handles putting it in rows and columns -->
                         <template v-for="(line,lineindex) in page.studylines"
-                            ><template v-for="layeridx in countLineLayers(line)+1"
+                            ><template v-for="(layernr,layeridx) in countLineLayers(line)"
                                 ><template v-for="(n,index) in (page.periods+1)"
                                     ><r-studyline-slot 
-                                        v-if="index > 0"
+                                        v-if="index > 0 && showslot(line, index, layeridx, 'gradable')"
                                         type='gradable'
                                         v-model="line.slots[index].competencies" 
-                                        :key="'c-'+lineindex+'-'+index+'-'+layeridx" 
+                                        :key="'c-'+lineindex+'-'+index+'-'+layernr" 
                                         :slotindex="index" 
                                         :line="line"
                                         :plan="value"
@@ -325,23 +353,24 @@ export default {
                                         :period="page.perioddesc[index-1]"
                                         :guestmode='guestmode'
                                         :teachermode='teachermode'
-                                        :layer="layeridx-1"
+                                        :layer="layeridx"
                                         :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
-                                                + ((lineindex==0 && layeridx==1)?' first ':' ')
+                                                + ((lineindex==0 && layernr==1)?' first ':' ')
                                                 + ((lineindex==page.studylines.length-1)?' last ':' ')"
                                     ></r-studyline-slot
                                     ><r-studyline-slot 
+                                        v-if="showslot(line, index, layeridx, 'gradable')"
                                         type='filter'
                                         v-model="line.slots[index].filters" 
                                         :teachermode='teachermode'
-                                        :key="'f-'+lineindex+'-'+index+'-'+layeridx" 
+                                        :key="'f-'+lineindex+'-'+index+'-'+layernr" 
                                         :slotindex="index" 
                                         :line="line"
                                         :plan="value"
                                         :page="page"
-                                        :layer="layeridx-1"
+                                        :layer="layeridx"
                                         :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
-                                                + ((lineindex==0 && layeridx==1)?' first ':'')
+                                                + ((lineindex==0 && layernr==1)?' first ':'')
                                                 + ((lineindex==page.studylines.length-1)?' last ':' ')
                                                 + ((index==page.periods)?' rightmost':'')"
                                         >
@@ -484,6 +513,14 @@ export default {
                     else {
                         return false;
                     }
+                },
+                spanCss(){
+                    if(this.item && this.item.span > 1){
+                        const span = (2 * this.item.span) - 1;
+                        return `width: 100%; grid-column: span ${span};`;
+                    } else {
+                        return "";
+                    }
                 }
             },
             data() {
@@ -498,8 +535,9 @@ export default {
                          + 'r-studyline-slot-' + slotindex + ' ' 
                          + ((slotindex==0)?'r-studyline-firstcolumn ':' ')"
                 :data-studyline="line.id" ref="sizeElement"
-                    ><div class="t-slot-item" v-if="item"
-                        ><r-item 
+                :style='spanCss'
+                ><div class="r-slot-item" v-if="item"
+                    ><r-item 
                         v-model="item" 
                         :plan="plan"
                         :guestmode='guestmode'
diff --git a/css/devstyles.css b/css/devstyles.css
index beb3691..b663d2a 100644
--- a/css/devstyles.css
+++ b/css/devstyles.css
@@ -424,18 +424,22 @@ ul.t-competency-list li {
 }
 
 .gradable .t-slot-item,
-.gradable .r-slit-item {
+.gradable .r-slot-item {
     width: 100%;
 }
 
-.t-slot-item {
+.t-slot-item,
+.r-slot-item {
     margin-top: 5px;
     margin-bottom: 5px;
     margin-left: auto;
     margin-right: auto;
+    display: grid;
 }
 
-.t-item-base {
+.t-item-base,
+.r-item-base {
+    align-self: center;
     position: relative;
 }
 
@@ -719,13 +723,13 @@ a.t-item-course-config {
 
 
 
-.r-item-base {
+/*.r-item-base {
     margin-top: 5px;
     margin-bottom: 5px;
     margin-left: auto;
     margin-right: auto;
     position: relative;
-}
+}*/
 
 .gradable .r-item-base {
     width: 100%;